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修改儿童级别的道具

回答

相关问题