reactjs入门到实战---- props详解

Posted 2020-07-21 快乐~

1》》》基础的props使用     不可修改父属性    getDefaultProps   对于外界/父组件的属性值，无法直接修改，它是只读的。

<script type="text/babel">
            var Hello = React.createClass({
                getDefaultProps:function(){
                    return{
                        name:‘Default‘
                    }
                },
                render:function(){
                    return (
                        <span>Hello {this.props.name} !</span>
                    );
                }
            });
            ReactDOM.render(
                <Hello />,
                document.getElementById(‘example‘)
            )
        </script>

2》》》父子传递

<script type="text/babel">
            //两层以上的传递
            //1、props 属性值提倡显示的传递到下一级
            //子组件
            var Child = React.createClass({
                render:function(){
                    return(
                        <span>Hello {this.props.fullName}</span>
                    );
                }
            });
            
            var Parent = React.createClass({
                addFamilyName:function(name){
                    return (name + ‘chen‘);
                },
                render:function(){
                    return(
                        <div>
                            <Child fullName={this.addFamilyName(this.props.name)} name={this.props.name}/>
                        </div>
                    );
                }
            });
            
            ReactDOM.render(
            <Parent name="jin" />,document.getElementById(‘example‘)
            )
        </script>

》》》state和props的区别

1、state 本组件内的数据   相对封闭的单元/结构的数据  状态     组件的无状态

2、props 组件直接的数据流动  单向的 ，从owner向子组件

<script type="text/babel">
            //props和state的区别
            var Msg = React.createClass({
                render:function(){
                    return(
                        <div>
                            <span style={{color:this.props.color}}>Hello {this.props.master}.IT is {this.props.time} now.the color is {this.props.color} </span>
                        </div>
                    
                    );
                }
            });
            var Hello = React.createClass({
                getInitialState:function(){
                    return{
                        time:new Date().toDateString(),
                        color:‘red‘
                    }
                },
                changeColor:function(){
                    this.setState({color:‘green‘})
                },
                render:function(){
                    return(
                        <div>
                            <span onClick={this.changeColor}>The ownerName is {this.props.name}</span>
                            <br/>
                            <Msg master={this.props.name} time={this.state.time} color={this.state.color} />
                        </div>
                    );
                }
                
            });
            
            ReactDOM.render(
                <Hello name="world" />,
                document.getElementById(‘example‘)
            )
        </script>