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>