chenxuan/react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'xxx'

Browse Source
This commit is contained in:
chenxuan
2022-01-11 15:42:13 +08:00
parent f9bc684c6e
commit 33e944e672
156 changed files with 151333 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
B/15.6.1/4/1.html
+31
View File
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>props默认值</title>
<script src="../bower_components/react/react.js"></script>
<script src="../bower_components/react/react-dom.js"></script>
<script src="../bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var Test=React.createClass({
getDefaultProps:function(){
return {
x:"1111111111111"
}
},
render:function(){
return <h2>{this.props.x}</h2>
}
})
ReactDOM.render(
<Test/>
,document.getElementById('app')
)
</script>
</body>
</html>
B/15.6.1/4/2.html
+60
View File
@@ -0,0 +1,60 @@
<!--
* @Author: chenxuan
* @Date: 2021-11-21 15:55:15
* @LastEditTime: 2022-01-11 15:32:33
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>props与state</title>
<script src="../bower_components/react/react.js"></script>
<script src="../bower_components/react/react-dom.js"></script>
<script src="../bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var A1=React.createClass({
getInitialState:function(){
return{
a:'a1',
b:'b1',
c:'c1'
}
},
render:function(){
return(
<div>
<B1 a={this.state.a}/>
<B2 b={this.state.b}/>
<B3 c={this.state.c}/>
</div>
)
}
});
var B1=React.createClass({
render:function(){
return <p>{this.props.a}</p>
}
});
var B2=React.createClass({
render:function(){
return <p>{this.props.b}</p>
}
});
var B3=React.createClass({
render:function(){
return <p>{this.props.c}</p>
}
});
ReactDOM.render(
<A1/>
,document.getElementById('app')
)
</script>
</body>
</html>
B/15.6.1/4/3.html
+74
View File
@@ -0,0 +1,74 @@
<!--
* @Author: chenxuan
* @Date: 2021-11-21 15:55:15
* @LastEditTime: 2022-01-11 15:32:37
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>生命周期</title>
<script src="../bower_components/react/react.js"></script>
<script src="../bower_components/react/react-dom.js"></script>
<script src="../bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var A1=React.createClass({
getInitialState:function(){
alert("初始状态值!");
return{
color:'red'
}
},
componentWillMount:function(){
alert("第一次将要渲染")
},
componentDidMount:function(){
alert("第一次组件渲染完成");
let this_=this;
setTimeout(function(){
this_.setState({
color:'green'
})
},0)
},
componentWillUpdate:function(){
alert("因状态发生变化，重新渲染");
},
componentDidUpdate:function(){
alert("组件状态已发生变化");
},
render:function(){
return(
<div style={{color:this.state.color}}>北京欢迎您!</div>
)
}
});
var B1=React.createClass({
render:function(){
return <p>{this.props.a}</p>
}
});
var B2=React.createClass({
render:function(){
return <p>{this.props.b}</p>
}
});
var B3=React.createClass({
render:function(){
return <p>{this.props.c}</p>
}
});
ReactDOM.render(
<A1/>
,document.getElementById('app')
)
</script>
</body>
</html>