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>

猜你喜欢