React組件屬性 （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!'); } } }, /* ... */ }); 

默認 Prop 值

React 支持以聲明式的方式來定義 props 的默認值。

var ComponentWithDefaultProps = React.createClass({ getDefaultProps: function() { return { value: 'default value' }; } /* ... */ }); 

當父級沒有傳入 props 時，getDefaultProps() 可以保證 this.props.value 有默認值，注意 getDefaultProps 的結果會被 緩存。得益於此，你可以直接使用 props，而不必寫手動編寫一些重復或無意義的代碼。

傳遞 Props：小技巧

有一些常用的 React 組件只是對 HTML 做簡單擴展。通常，你想少寫點代碼來把傳入組件的 props 復制到對應的 HTML 元素上。這時 JSX 的 spread 語法會幫到你：

var CheckLink = React.createClass({ render: function() { // 這樣會把 CheckList 所有的 props 復制到 <a> return <a {...this.props}>{'√ '}{this.props.children}</a>; } }); React.render( <CheckLink href="/checked.html"> Click here! </CheckLink>, document.getElementById('example') ); 

單個子級

React.PropTypes.element 可以限定只能有一個子級傳入。

var MyComponent = React.createClass({ propTypes: { children: React.PropTypes.element.isRequired }, render: function() { return ( <div> {this.props.children} // 有且僅有一個元素，否則會拋異常。 </div> ); } }); 

Mixins

組件是 React 里復用代碼最佳方式，但是有時一些復雜的組件間也需要共用一些功能。有時會被稱為 跨切面關注點。React 使用 mixins 來解決這類問題。

一個通用的場景是：一個組件需要定期更新。用 setInterval() 做很容易，但當不需要它的時候取消定時器來節省內存是非常重要的。React 提供 生命周期方法 來告知組件創建或銷毀的時間。下面來做一個簡單的 mixin，使用 setInterval() 並保證在組件銷毀時清理定時器。

var SetIntervalMixin = { componentWillMount: function() { this.intervals = []; }, setInterval: function() { this.intervals.push(setInterval.apply(null, arguments)); }, componentWillUnmount: function() { this.intervals.map(clearInterval); } }; var TickTock = React.createClass({ mixins: [SetIntervalMixin], // 引用 mixin getInitialState: function() { return {seconds: 0}; }, componentDidMount: function() { this.setInterval(this.tick, 1000); // 調用 mixin 的方法 }, tick: function() { this.setState({seconds: this.state.seconds + 1}); }, render: function() { return ( <p> React has been running for {this.state.seconds} seconds. </p> ); } }); React.render( <TickTock />, document.getElementById('example') ); 

關於 mixin 值得一提的優點是，如果一個組件使用了多個 mixin，並且有多個 mixin 定義了同樣的生命周期方法（如：多個 mixin 都需要在組件銷毀時做資源清理操作），所有這些生命周期方法都保證會被執行到。方法執行順序是：首先按 mixin 引入順序執行 mixin 里方法，最后執行組件內定義的方法。