React Props · 前端開發手冊

# React Props state 和 props 主要的區別在于 props 是不可變的，而 state 可以根據與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數據。而子組件只能通過 props 來傳遞數據。 ## 使用 Props 以下實例演示了如何在組件中使用 props： ~~~ <body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="Runoob" />, document.getElementById('example') ); </script> </body> ~~~ 實例中 name 屬性通過 this.props.name 來獲取。 ## 默認 Props 你可以通過 getDefaultProps() 方法為 props 設置默認值，實例如下： ~~~ var HelloMessage = React.createClass({ getDefaultProps: function() { return { name: 'Runoob' }; }, render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') ); ~~~ ## State 和 Props 以下實例演示了如何在應用中組合使用 state 和 props 。我們可以在父組件中設置 state，并通過在子組件上使用 props 將其傳遞到子組件上。在 render 函數中, 我們設置 name 和 site 來獲取父組件傳遞過來的數據。 ~~~ <div id="example"></div> <script type="text/babel"> var WebSite = React.createClass({ getInitialState: function() { return { name: "菜鳥教程", site: "http://www.runoob.com" }; }, render: function() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }); ReactDOM.render( <WebSite />, document.getElementById('example') ); </script> ~~~ ## Props 驗證 Props 驗證使用 propTypes，它可以保證我們的應用組件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據是否有效。當向 props 傳入無效數據時，JavaScript 控制臺會拋出警告。以下實例創建一個 Mytitle 組件，屬性 title 是必須的且是字符串，非字符串類型會自動轉換為字符串： ~~~ var title = "菜鳥教程"; // var title = 123; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } }); ReactDOM.render( <MyTitle title={title} />, document.getElementById('example') ); ~~~ 更多驗證器說明如下： ~~~ React.createClass({ propTypes: { // 可以聲明 prop 為指定的 JS 基本數據類型，默認情況，這些數據是可選的 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, // 可以被渲染的對象 numbers, strings, elements 或 array 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), // 特定 shape 參數的對象 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!'); } } }, /* ... */ }); ~~~