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>
