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-05-03 19:49:45 +08:00
parent ef97468194
commit a0a73cd2f1
6 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
basic/createClass/1.html
+56
View File
@@ -0,0 +1,56 @@
<!--
* @Author: chenxuan
* @Date: 2022-01-21 10:24:49
* @LastEditTime: 2022-01-21 11:27:40
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15.6.1-createClass</title>
</head>
<body>
<div id="app"></div>
<script src="../15.6.1/bower_components/react/react.js"></script>
<script src="../15.6.1/bower_components/react/react-dom.js"></script>
<script src="../15.6.1/bower_components/babel/browser.js"></script>
<script type="text/babel">
var A1=React.createClass({
render(){
return(
<div>
<h1>{this.props.x1}</h1>
<h1>{this.props.x2}</h1>
</div>
)
}
})
var A2=React.createClass({
render(){
return(
<div>
<h1>{this.props.x1}</h1>
<h1>{this.props.x2}</h1>
</div>
)
}
})
var A=React.createClass({
render(){
return (
<div>
<A1 x1={this.props.x1}/>
<A2 x2={this.props.x2}/>
</div>
)
}
})
ReactDOM.render(
<A x1="今天天气不错！" x2="今天天气真的不错！"/>
,document.getElementById('app')
)
</script>
</body>
</html>
basic/createClass/2.html
+66
View File
@@ -0,0 +1,66 @@
<!--
* @Author: chenxuan
* @Date: 2022-01-21 11:14:22
* @LastEditTime: 2022-01-21 11:27:16
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15.6.1-getInitialState</title>
</head>
<body>
<div id="app"></div>
<script src="../15.6.1/bower_components/react/react.js"></script>
<script src="../15.6.1/bower_components/react/react-dom.js"></script>
<script src="../15.6.1/bower_components/babel/browser.js"></script>
<script type="text/babel">
var A1=React.createClass({
getInitialState:function(){
return {
data:[{
id:1,
name:"陈轩",
sex:"男",
age:18
},{
id:2,
name:"大侠",
sex:"女",
age:100
},{
id:3,
name:"大侠1",
sex:"男",
age:23
}]
}
},
render:function(){
let person=this.state.data;
return(
<div>
{
person.map(function(item){
return (
<ul key={item.id}>
<li>{item.name}</li>
<li>{item.sex}</li>
<li>{item.age}</li>
</ul>
)
})
}
</div>
)
}
})
ReactDOM.render(
<A1/>,document.getElementById('app')
)
</script>
</body>
</html>
basic/createClass/3.html
+76
View File
@@ -0,0 +1,76 @@
<!--
* @Author: chenxuan
* @Date: 2022-01-21 11:37:41
* @LastEditTime: 2022-01-21 14:25:40
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../15.6.1/bower_components/react/react.js"></script>
<script src="../15.6.1/bower_components/react/react-dom.js"></script>
<script src="../15.6.1/bower_components/babel/browser.js"></script>
<script type="text/babel">
var A=React.createClass({
getInitialState:function(){
return{
data:[{
id:1,
name:"陈轩",
sex:"男",
age:18
},{
id:2,
name:"大侠",
sex:"女",
age:100
},{
id:3,
name:"大侠1",
sex:"男",
age:23
}]
}
},
handel:function(){
let arr=this.state.data;
let input=this.refs.haha.value;
let obj={name:input,id:7,sex:"不男不女",age:"100"}
arr.push(obj)
this.setState({data:arr})
},
render(){
let person=this.state.data;
return(
<div>
<button onClick={this.handel}>修改值</button>
<li><input type="text" ref="haha"/></li>
{
person.map(function(item){
return (
<ul key={item.id}>
<li>{item.name}</li>
<li>{item.sex}</li>
<li>{item.age}</li>
</ul>
)
})
}
</div>
)
}
})
ReactDOM.render(
<A/>,document.getElementById('app')
)
</script>
</body>
</html>