react 的props和state
Posted guiyh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react 的props和state相关的知识，希望对你有一定的参考价值。
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>
以上是关于react 的props和state的主要内容，如果未能解决你的问题，请参考以下文章
从 0 到 1 实现 React 系列 —— 组件和 state|props
React Native 快速入门之认识Props和State