摘要:我們可以使用屬性延伸覆蓋原來的屬性值手動轉移大部分情況你應該明確的向下傳遞屬性,這樣可以確保你只需要暴露內部的一個子集。但是屬性屬性或者屬性呢利用轉移使用了的結構化賦值,所以引入時要加入,如下
React當中的組件嵌套很常見,外部組件暴露的屬性也許會干一些復雜的實現細節。
我們可以使用屬性延伸覆蓋原來的屬性值
var Component = React.createClass({ render: function () { return手動轉移this is a div} }); React.render(, document.body );
大部分情況你應該明確的向下傳遞屬性,這樣可以確保你只需要暴露內部API的一個子集。
var FancyCheckbox = React.createClass({ render: function() { var fancyClass = this.props.checked ? "FancyChecked" : "FancyUnchecked"; return ({this.props.children}); } }); React.render(Hello world! , document.getElementById("example") );
但是name屬性、title屬性或者onMouseOver屬性呢?
利用JSX ... 轉移var FancyCheckbox = React.createClass({ render: function() { var { checked, ...other } = this.props; var fancyClass = checked ? "FancyChecked" : "FancyUnchecked"; // `other` contains { onClick: console.log } but not the checked property return ( ); } }); React.render(Hello world! , document.body );
var { checked, ...other } = this.props;使用了ES7的結構化賦值,所以引入時要加入harmony,如下: