top
Loading...
React Props

React Props

state 和 props 主要的區別在於 props 是不可變的,而 state 可以根據與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據。


使用 Props

以下實例演示了如何在組件中使用 props:

React 實例

function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; } const element = <HelloMessage name="Runoob"/>; ReactDOM.render( element, document.getElementById('example') );

嘗試一下 »

實例中 name 屬性通過 props.name 來獲取。


默認 Props

你可以通過組件類的 defaultProps 屬性為 props 設置默認值,實例如下:

React 實例

class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } HelloMessage.defaultProps = { name: 'Runoob' }; const element = <HelloMessage/>; ReactDOM.render( element, document.getElementById('example') );

嘗試一下 »

State 和 Props

以下實例演示了如何在應用中組合使用 state 和 props 。我們可以在父組件中設置 state, 併通過在子組件上使用 props 將其傳遞到子組件上。在 render 函數中, 我們設置 name 和 site 來獲取父組件傳遞過來的數據。

React 實例

class WebSite extends React.Component { constructor() { super(); this.state = { name: "教程", site: "https://www.sharebody.com" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } } class Link extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } ReactDOM.render( <WebSite />, document.getElementById('example') );

嘗試一下 »

Props 驗證

React.PropTypes 在 React v15.5 版本後已經移到了 prop-types 庫。

<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

Props 驗證使用 propTypes,它可以保證我們的應用組件被正確使用,React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據是否有傚。當向 props 傳入無傚數據時,JavaScript 控製台會拋出警告。

以下實例創建一個 Mytitle 組件,屬性 title 是必須的且是字符串,非字符串類型會自動轉換為字符串 :

React 16.4 實例

var title = "教程"; // var title = 123; class MyTitle extends React.Component { render() { return ( <h1>Hello, {this.props.title}</h1> ); } } MyTitle.propTypes = { title: PropTypes.string }; ReactDOM.render( <MyTitle title={title} />, document.getElementById('example') );

嘗試一下 »

React 15.4 實例

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') );

嘗試一下 »

更多驗證器說明如下:

MyComponent.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!'); } } } }
北斗有巢氏 有巢氏北斗