• 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)

    propTypesReact.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>
  • 相关阅读:
    快速获取JOB运行结果
    快速获取DB服务器当前 MEM CPU的资源消耗
    Mongodb Sharding+Replica Set
    MongoDB replSet
    Journal工作原理
    Oracle索引梳理系列(八)- 索引扫描类型及分析(高效索引必备知识)
    Oracle索引梳理系列(七)- Oracle唯一索引、普通索引及约束的关系
    Oracle索引梳理系列(六)- Oracle索引种类之函数索引
    Oracle索引梳理系列(五)- Oracle索引种类之表簇索引(cluster index)
    Oracle索引梳理系列(四)- Oracle索引种类之位图索引
  • 原文地址:https://www.cnblogs.com/chenjinxinlove/p/5559932.html
Copyright © 2020-2023  润新知