reactjs入门到实战（五）---- props详解

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>

 》》》propTypes  

Prop 验证

   1、React.PropTypes.string   2、React、PropTypes.bool   3、React.PropTypes.number  4、React.PropTypes.instanceOf(Message)  5、optionalUnion：React.PropTypes.oneOfType([])   6、React.PropTypes.arrayOf(React.PropTypes.number) 7、customProp：function(props,propName,componentName)

propTypes。React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 propTypes。下面用例子来说明不同验证器的区别：

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本类型。默认
    // 情况下，这些 prop 都是可传可不传的。
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 所有可以被渲染的对象：数字，
    // 字符串，DOM 元素或包含这些类型的数组。
    optionalNode: React.PropTypes.node,

    // React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 指定的多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定形状参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 以后任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
    // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

栗子：》》》》

<script type="text/babel">
            //设定props的属性
             var Hello = React.createClass({
                 propTypes:{
                     //name:React.PropTypes.string
                     //name:React.PropTypes.oneOf(['News','world'])
                     //type:React.PropTypes.oneOfType([
                     //    React.PropTypes.string,
                     //    React.PropTypes.number,
                     //]),
                     //type:React.PropTypes.arrayOf(React.PropTypes.number),
                     name:function(props,propName,componentName){
                         if(!/^W/.test(props[propName])){
                             return new Error(
                                 'Invalid prop `' + propName + '`supplied to' + '`' + componentName + '`.Validtion failed.' 
                             );
                         }
                     }
                 },
                 
                 render:function(){
                     return (
                         <div>
                             <span>Hello {this.props.name}!</span>
                         </div>
                     );
                 }
             });
             
             ReactDOM.render(
                 <Hello name='world' />,
                 document.getElementById('example')
             );
        </script>    

》》》this.props.children  

<script type="text/babel">
                //this.props.children
                
                var Note = React.createClass({
                    render:function(){
                        return(
                            <li>{this.props.text}</li>    
                        );
                    }
                });
                
                var NotesList = React.createClass({
                    render:function(){
                        return(
                            <ol>
                                {
                                    this.props.children.map(function(child,index){
                                        return <Note key={index} text={child}/>
                                    })
                                }
                            </ol>
                        );
                    }
                });
                
                ReactDOM.render(
                    <NotesList>
                        <span>hello</span>
                        <span>world</span>
                    </NotesList>,
                    document.getElementById('example')
                )
            </script>

>>>结构赋值利用es6   ...

<script type="text/babel">
                var Child = React.createClass({
                    render:function(){
                        return(
                            <div>
                                <span>
                                    I am {this.props.name}! I am {this.props.age} years old. It is {this.props.time} now 
                                </span>
                            </div>
                        );
                    }
                });
                
                var Parent = React.createClass({
                    getInitialState:function(){
                        return{
                            time: new Date().toDateString()
                        }
                    },
                    
                    render:function(){
                        var {...others} = this.props;
                        return(
                            <Child {...others} time={this.state.time} />
                        );
                    }
                });
                
                ReactDOM.render(
                    <Parent name="chen" age="24" />,
                    document.getElementById('example')
                );
            </script>