複製元件
在少數的情況下,某個元件可能想要變更不屬於自己的 props(例如: 修改 this.props.children 的 className)。
或者是複製多個被傳入的元件。cloneWithProps() 使這件事變的可能。
ReactComponent React.addons.cloneWithProps(ReactComponent component, object? extraProps)
複製淺層的 component 然後合併 extraProps 。 Props 被使用和 transferPropsTo() 一樣的方式合併,所以類似像 className 屬性就會被整合進去。
注意:
cloneWithProps 不會轉移 key 屬性至複製的元件中。如果您希望保存 key,請使用 extraProps 物件
var clonedComponent = cloneWithProps(originalComponent, { key : originalComponent.props.key });
元件的參考
如果您正在使用 React 元件到一個大型未使用 React 的程式中或者正在轉移重寫,您可能會需要保留元件的參考。 React.renderComponent 會回傳一個已掛載元件的參考
var myComponent = React.renderComponent(<MyComponent />, myContainer);
務必注意。元件的建構子並沒有回傳物件實例,就只是 descriptor 就是我們一開始說的標記物件,一個輕量化用來告訴 React 該輸出什麼 DOM 結構的描述物件
/** @jsx React.DOM */
var myComponent = <MyComponent />; // This is just a descriptor.
// Some code here...
myComponent = React.renderComponent(myComponent, myContainer);
this.props.children undefined
簡單的說您不能透過 this.props.children 存取元件結構中的子元素,直接看程式碼理解
/** @jsx React.DOM */
var App = React.createClass({
componentDidMount: function() {
// This doesn't refer to the spans! It refers to the children between
// last line's <App></App>, which are undefined.
console.log(this.props.children);
},
render: function() {
return <div><span/><span/></div>;
}
});
React.renderComponent(<App></App>, mountNode);