一次更新多个组件的状态

我有一个listview组件，它由一些子listitem组件组成。一次更新多个组件的状态

每个孩子的listitem都有一个showSubMenu布尔状态，它在列表项旁边显示一些额外的按钮。

此状态应更新以响应用户事件，例如单击组件DOM节点。

childcomponent：

_handleClick() { 
    ... mutate state 
    this.props.onClick() // call the onClick handler provided by the parent to update the state in parent 
}

但是，这感觉有点不对更新状态等，它在不同的地方发生变异状态。

另一种我认为可以完成的方式是直接调用this.props.onClick，然后将子状态作为道具移动到父项中，然后改变状态并将其作为道具缓冲下来。

哪种方法（如果有的话）是惯用的还是可取的？

来源

2015-05-14 Tarlen

首先，我认为这个问题的标题并没有很好地描述你的疑问。更多关于国家应该去哪里的问题。

React的theory表示您应该将状态置于更高的组件中，您可以找到它作为一组组件的单一来源。

对于你的应用程序每件状态：

确定每个呈现基于该州一些组件。

找到一个公共所有者组件（一个组件，高于所有需要该层次中状态的组件）。

普通所有者或层次结构中位于较高层的其他组件应该拥有状态。

如果找不到可以拥有状态的组件，请创建一个新组件，只是为了保存该状态并将其添加到公用所有者组件上方层次结构中的某个位置。

然而，在Facebook的said一个软件工程师：

我们开始与拉需要为子女的所有数据，并把它传递向下穿过道具大顶级组件。这导致中间组件中的大量粗俗和不相关的代码。我们决定什么，在大多数情况下，是声明组件和获取他们需要自己的数据...

当然，在谈论从商店获取的数据，但在一些什么IM装盘说案件的理论不是最好的选择。

在这种情况下，我会说showSubMenu状态只对列表项有意义，以显示几个按钮，所以它是一个很好的选项将该状态放在子组件中。我说的是一个很好的选择，因为是一个简单的问题，一个简单的解决方案，你提出一种具有类似this手段的另一种选择：

var GroceryList = React.createClass({ 
    handleClick: function(i) { 
    console.log('You clicked: ' + this.props.items[i]); 
}, 

render: function() { 
    return (
    <div> 
     {this.props.items.map(function(item, i) { 
     return (
      <div onClick={this.handleClick.bind(this, i)} key={i}>{item} </div> 
     ); 
     }, this)} 
    </div> 
); 
} 
});

如果在未来，列表视图必须得到承认的是状态来显示某些东西，例如状态应该在父组件中。

但是，我认为这是一条细线，你可以做wathever有道理在您的特定情况下，我在我的应用程序非常相似的情况下，这是一个简单的例子，所以我就把状态孩子。明天也许我必须改变它，并把状态放在他的父母身上。

来源

2015-05-14 12:06:59 gabrielgiussi

一次更新多个组件的状态

回答

相关问题