Question

我有一个组件列表，并希望在用户点击它时将每个组件设置为选中。

流程看起来像

Dashboard
 ⎿ MyList
    ⎿ MyItem -> onClick -> setState({active:true})

我已经通过使用状态完成了所选部分，但我想知道如何停用所有其他元素。

感谢。

Answer 1

根据定义，无法从组件外部访问状态。并且不建议始终将道具复制到州。

在组件树结构中。您应该将所选项目设置为父项目中的状态（不在项目中）。

并将选定的Id作为道具传递给每个项目。

在子渲染中，您可以执行类似

的操作

let itemIsSelected = (this.props.itemId == this.props.selectedId);

将一个方法从父级传递给子级，然后将其包含为：

onClick={() => this.props.setSelected(this.props.itemId)}

在官方文档中，有一个good explanation on how to structure components。这可能有助于确定某些事物应该是状态还是道具，或者是否在子女或父母内部更好地管理事物。

Answer 2

Dan Abramov提到了另一种巧妙的方法来从组件类外部访问状态更改。从技术上讲，setState函数仍然仍然必须从组件类内部调用，因此它并不是真正位于组件外部，但是这允许您根据需要以相同的方式从返回的组件中设置不同组件的状态。函数的值。

基本上，您可以将函数传递到setState()函数中，状态将设置为该函数的返回值。