基础
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.js"></script>
<script type="text/babel">
class Text extends React.Component{ //继承自 React.Component
constructor(...args){ //将参数收集起来
super(...args) //将所有参数继承并展开
}
render(){ //render方法是必须的
return <span>abcD</span>
}
}
window.onload = function(){
let oDiv = document.getElementById('div1')
ReactDOM.render( //渲染
<Text></Text>,
oDiv
)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>this.props
class Item extends React.Component{
constructor(...args){
super(...args)
}
render(){
return <li>{this.props.str}</li> //通过this.props.str设置参数
}
}
window.onload = function(){
let oDiv = document.getElementById('div1')
ReactDOM.render(
<ul>
<Item str="123"></Item>
<Item str="456"></Item>
<Item str="789"></Item>
</ul>,
oDiv
)
}组件加组件
class Item extends React.Component{
constructor(...args){
super(...args)
}
render(){
return <li>{this.props.str}</li>
}
}
class List extends React.Component{
constructor(...args){
super(...args)
}
render(){
let aItems = []
for(var i = 0; i < this.props.arr.length; i++){
aItems.push(<Item str={this.props.arr[i]}></Item>)
}
return <ul>{aItems}</ul>
}
}
window.onload = function(){
let oDiv = document.getElementById('div1')
ReactDOM.render(
<List arr={[0,1,2,3]}></List>,
oDiv
)
}map优化
class Item extends React.Component{
constructor(...args){
super(...args)
}
render(){
return <li>{this.props.str}</li>
}
}
class List extends React.Component{
constructor(...args){
super(...args)
}
render(){
//let aItems = this.props.arr.map(a=><Item str={a}></Item>)
return <ul>{this.props.arr.map(a=><Item str={a}></Item>)}</ul>
}
}
window.onload = function(){
let oDiv = document.getElementById('div1')
ReactDOM.render(
<List arr={[0,1,2,3]}></List>,
oDiv
)
}