React.js修改兒童級別的道具

通常我的道具是字符串。正如所料，在子級別「修改」字符串不會直接修改狀態，因爲字符串是不可變的，只有引用會改變。不過，我最近通過一個物體作爲道具。修改該對象的成員直接傳遞給狀態。我明白爲什麼會發生這種情況，我只是想知道這是否是React.js中的反模式？React.js修改兒童級別的道具

例如：

/** @jsx React.DOM */ 
var ChildComponent = React.createClass({ 
    click: function(e) { 
    this.props.xyz.subObject = "abc"; 
    this.props.onClick(); 
    }, 
    render: function() { 
    return(
     <div onClick={this.click}>Click Me to Update Parent State</div> 
    ); 
    } 
}); 

var ParentComponent = React.createClass({ 
    getInitialState: function() { return { xyz: { subObject: "123" } }; }, 
    childClick: function() { 
    this.setState(this.state); 
    }, 
    render: function() { 
    return(
     <div> 
     <ChildComponent onClick={this.childClick} xyz={this.state.xyz} /> 
     <pre>AppState: <br /><br />{ JSON.stringify(this.state, 0, 2) }</pre> 
     </div> 
    ); 
    } 
}); 

React.renderComponent(<ParentComponent />, document.body);

爲什麼會有人想這樣做？這個特別的發現來自原型化包含行，列和項目的GUI。行可以通過拖動來排序。行包含可以通過拖動排序或移動到其他行的列。列中的項目可以在相同或不同行中的列之間拖動。除此之外，項目也是組件，可以自行更新，最終將更新傳遞迴根狀態。

在項目級別更改道具對象成員，併發起鏈接事件以調用setState，工作以及調用鏈接this.props.onEvent(rowId, colId, itemId, newItemProps)。這是好事，因爲現在它不再是重要的項目是列的一部分，或者該列在一行中，或該行是根組件的一部分。唯一的解決方法是將一些關於項目模型的知識添加到根組件，以便它可以嘗試查找並替換正確的參數。

來源

2014-09-25 James

這就是爲什麼你應該使用Flux商店。商店可以由父母觀察。兒童通過行爲修改商店。商店通知父母獲得新的狀態。父母用新道具讓孩子們放棄。

來源

2014-09-25 21:42:32 Rygu

React.js修改兒童級別的道具

回答

相關問題