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
basic/2自定义组件/1.html
-28
View File
@@ -1,28 +0,0 @@
<!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="../reactjs/bower_components/react/react.js"></script>
<script src="../reactjs/bower_components/react/react-dom.js"></script>
<script src="../reactjs/bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
//定义组件
var Test=React.createClass({
render:function(){
return <h2>hello word!</h2>
}
})
//组件调用
ReactDOM.render(
<Test/>
,document.getElementById('app')
)
</script>
</body>
</html>
basic/2自定义组件/2.html
-28
View File
@@ -1,28 +0,0 @@
<!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="../reactjs/bower_components/react/react.js"></script>
<script src="../reactjs/bower_components/react/react-dom.js"></script>
<script src="../reactjs/bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
//定义组件
var Test=React.createClass({
render:function(){
return <h2>{this.props.x}</h2>
}
})
//组件调用
ReactDOM.render(
<Test x="今天天气不错！"/>
,document.getElementById('app')
)
</script>
</body>
</html>
basic/2自定义组件/3.html
-43
View File
@@ -1,43 +0,0 @@
<!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="../reactjs/bower_components/react/react.js"></script>
<script src="../reactjs/bower_components/react/react-dom.js"></script>
<script src="../reactjs/bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var A1=React.createClass({
render:function(){
return <li><h2>{this.props.m1}</h2></li>
}
})
var A2=React.createClass({
render:function(){
return <li><h2>{this.props.m2}</h2></li>
}
})
//组件调用
var B1=React.createClass({
render:function(){
return(
<ul>
<A1 m1={this.props.m1}/>
<A2 m2={this.props.m2}/>
</ul>
)
}
})
//组件渲染
ReactDOM.render(
<B1 m1="今天天气不错！" m2="今天天气真的不错！"/>
,document.getElementById('app')
)
</script>
</body>
</html>
basic/3状态/1.html
-48
View File
@@ -1,48 +0,0 @@
<!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="../reactjs/bower_components/react/react.js"></script>
<script src="../reactjs/bower_components/react/react-dom.js"></script>
<script src="../reactjs/bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app">
<script type="text/babel">
var A1=React.createClass({
getInitialState:function(){
return{
data:"abcdefg"
}
},
render:function(){
return <h2>{this.state.data}</h2>
}
});
var A2=React.createClass({
getInitialState:function(){
return{
data:["张三","李四","王五"]
}
},
render:function(){
var arr=this.state.data;
return <ul>{
arr.map(function(item){
return <li>{item}</li>
})
}</ul>
}
});
//组件渲染
ReactDOM.render(
<A2/>
,document.getElementById('app')
)
</script>
</div>
</body>
</html>
basic/3状态/2.html
-47
View File
@@ -1,47 +0,0 @@
<!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="../reactjs/bower_components/react/react.js"></script>
<script src="../reactjs/bower_components/react/react-dom.js"></script>
<script src="../reactjs/bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var A2=React.createClass({
getInitialState:function(){
return{
data:["张三","李四","王五"]
}
},
handle:function(){
let arr=this.state.data;
arr.push("陈轩");
this.setState({
data:arr
})
},
render:function(){
let arr=this.state.data;
return <ul>{
arr.map(function(item){
return <li>{item}</li>
})
}
<li><button type="button" onClick={this.handle}>更新</button></li>
</ul>
}
});
//组件渲染
ReactDOM.render(
<A2/>
,document.getElementById('app')
)
</script>
</body>
</html>
basic/3状态/3.html
-50
View File
@@ -1,50 +0,0 @@
<!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>refs属性</title>
<script src="../reactjs/bower_components/react/react.js"></script>
<script src="../reactjs/bower_components/react/react-dom.js"></script>
<script src="../reactjs/bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var A2=React.createClass({
getInitialState:function(){
return{
data:["张三","李四","王五"]
}
},
handle:function(){
let arr=this.state.data;
let _txt=this.refs.test1;
arr.push(_txt.value);
_txt.value='';
this.setState({
data:arr
})
},
render:function(){
let arr=this.state.data;
return <ul>{
arr.map(function(item){
return <li>{item}</li>
})
}
<li><input type="text" ref="test1"/></li>
<li><button type="button" onClick={this.handle}>更新</button></li>
</ul>
}
});
//组件渲染
ReactDOM.render(
<A2/>
,document.getElementById('app')
)
</script>
</body>
</html>
basic/4对象和生命周期/1.html
-31
View File
@@ -1,31 +0,0 @@
<!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="../reactjs/bower_components/react/react.js"></script>
<script src="../reactjs/bower_components/react/react-dom.js"></script>
<script src="../reactjs/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>
basic/4对象和生命周期/2.html
-60
View File
@@ -1,60 +0,0 @@
<!--
* @Author: chenxuan
* @Date: 2021-11-21 15:55:15
* @LastEditTime: 2021-11-21 22:21:30
* @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="../reactjs/bower_components/react/react.js"></script>
<script src="../reactjs/bower_components/react/react-dom.js"></script>
<script src="../reactjs/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>
basic/4对象和生命周期/3.html
-74
View File
@@ -1,74 +0,0 @@
<!--
* @Author: chenxuan
* @Date: 2021-11-21 15:55:15
* @LastEditTime: 2021-11-21 22:24:19
* @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="../reactjs/bower_components/react/react.js"></script>
<script src="../reactjs/bower_components/react/react-dom.js"></script>
<script src="../reactjs/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>
basic/5事件/1.html
-41
View File
@@ -1,41 +0,0 @@
<!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>事件1</title>
<script src="../reactjs/bower_components/react/react.js"></script>
<script src="../reactjs/bower_components/react/react-dom.js"></script>
<script src="../reactjs/bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var A=React.createClass({
getInitialState:function(){
return {
val:'abc'
}
},
changeVal:function(){
this.setState({
val:'变化后的内容'
})
},
render:function(){
var val=this.state.val;
return <div>
<li><button onClick={this.changeVal}>改变值</button></li>
<li>{val}</li>
</div>
}
})
ReactDOM.render(
<A/>
,document.getElementById('app')
)
</script>
</body>
</html>
basic/5事件/2.html
-50
View File
@@ -1,50 +0,0 @@
<!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>事件2</title>
<script src="../reactjs/bower_components/react/react.js"></script>
<script src="../reactjs/bower_components/react/react-dom.js"></script>
<script src="../reactjs/bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var A1=React.createClass({
render:function(){
return <div>
<li>
<input type="text" value={this.props.val} onChange={this.props.change}/>
</li>
<li>{this.props.val}</li>
</div>
}
});
var B1=React.createClass({
getInitialState:function(){
return {
val:'abc'
}
},
change:function(e){
this.setState({
val:e.target.value
})
},
render:function(){
var val=this.state.val;
return <div>
<A1 val={val} change={this.change}/>
</div>
}
});
ReactDOM.render(
<B1/>
,document.getElementById('app')
)
</script>
</body>
</html>