reactjs - 从组件外部设置 React 组件状态

Question

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

流程看起来像

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

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

Answer 1

根据定义，状态不能从组件外部访问。 并且不建议总是将 props 复制到 state。

在你的组件树结构中。您应该将所选项目设置为父项中的状态(而不是项目中的状态)。

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

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

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

并将方法从父级传递给子级，然后将其包含为:

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

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