reactjs入門到實戰（五）---- props詳解
阿新 • • 發佈：2019-01-28
http://www.cnblogs.com/chenjinxinlove/category/837795.html
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>