我有一个组件列表，并希望在用户单击它时将每个组件设置为选中状态。
流程看起来像
Dashboard
⎿ MyList
⎿ MyItem -> onClick -> setState({active:true})
我已经使用 state 完成了选定的部分，但我想知道如何停用所有其他元素。
从组件外部设置 React 组件状态
IT技术
reactjs
2021-05-14 08:55:43
2个回答
根据定义，状态不能从组件外部访问。并且不建议总是将 props 复制到 state。
在您的组件树结构中。您应该将所选项目设置为父项中的状态（而不是项目中）。
并将选定的 Id 作为props传递给每个项目。
在子渲染中，您可以执行以下操作
let itemIsSelected = (this.props.itemId == this.props.selectedId);
并将方法从父级传递给子级，然后将其包含为：
onClick={() => this.props.setSelected(this.props.itemId)}
在官方文档中，对如何构建组件有很好的解释。这可能有助于确定某些东西应该是 state 还是 props，或者是否在 child 或 parent 内部更好地管理东西。
Dan Abramov 提到了另一种从组件类外部访问状态更改的巧妙方法。从技术上讲，setState无论如何仍然必须从组件类内部调用该函数，因此它并不是真正在组件外部，但是这允许您根据需要根据函数的返回值以相同的方式设置不同组件的状态。
基本上，您可以将一个函数传入setState()函数中，状态将设置为该函数的返回值。
你可以在这里看到他的帖子：https : //twitter.com/dan_abramov/status/824308413559668744?lang=en
其它你可能感兴趣的问题