props
当前组件的组件标签身上的所有属性和子节点构成的集合；
可以用来组件传递数据，一般用于父子组件之间；
this.props对象的属性与组件的属性一一对应，但对于组件标签的子节点，this.props.children属性的值有三种可能：
1、如果当前组件没有子节点，为underfined；
2、如果有一个子节点，类型为object；
3、如果是多个子节点，就为array。
react提供一个工具方法，React.Chilren来处理this.props.children。可以用React.Chilren.map来遍历所有子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script type="text/babel">
let Hello = React.createClass({
render(){
return(
<div>
{
React.Children.map(this.props.children,function(value,index){
return <p>{value}</p>
})
}
</div>
)
}
})
ReactDOM.render(
<Hello>
<span>hello</span>
</Hello>,
document.getElementById("app")
)
</script>
state和props一样。props是一个静态值，一旦设定了就不需要改变，一般用于设定请求的网络地址。
state是状态值，可以通过this.setState方法修改状态值，每次修改后，自动调用this.render方法，再次渲染组件。
getInitialState()方法用于定义初始状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script type="text/babel">
let Hello = React.createClass({
getInitialState(){ /*初始化状态值*/
return{
content:"hello"
}
},
update(){
this.setState({ /*修改状态值*/
content:"Hello World"
})
},
render(){
return(
<div>
<p>{this.state.content}</p>
<button onClick={this.update}>点击修改</button>
</div>
)
}
});
ReactDOM.render(
<Hello/>,
document.getElementById("app")
)
</script>
原文地址：https://www.cnblogs.com/guiyh/p/9393447.html
时间： 2024-10-31 21:01:26