javascript - ReactJS 动态替换 child

Question

我有一个奇特的用户界面，其中有几个“ Pane ”，中间有分隔线，您可以更改每个 Pane 的功能。假设我有两个不同的组件——一个待办事项列表和一个简单的文本编辑器。我希望您能够更改每个 Pane 中存在的组件以制作灵活的 UI。例如，我可能想将左侧的 Pane 从文本编辑器更改为待办事项列表。假设我有一个父元素 Pane , 我怎么能用另一个替换它的一个 child ？

<Pane>
    <TextEditor /> /* I want to replace that with a <ToDoList /> when I press a button */
    <SomeOtherComponentOnTheRight />
</Pane>

我试过存储 React.Children.toArray(this.props.children)在<Pane />的状态(如 this.state.currentChildren )，并在那里替换元素，但由于某种原因我找不到获取 <TextEditor /> 索引的方法在<Pane />的 this.state.currentChildren因为某些原因this.props.children不保留 child Prop ，所以我无法通过它传输数据。

抱歉，如果我把这个问题复杂化了，但我只是想知道如何动态更改组件的子组件。

Answer 1

您可以检查 JSX 中的状态以更改显示的内容，例如:

<Pane>
    { this.state.showEditor ? <TextEditor/> : <ToDoList /> }
    <SomeOtherComponentOnTheRight />
</Pane>

在代码的其他地方，您会有一些按钮调用 onClick 事件处理程序，该事件处理程序会根据先前的状态将“showEditor”的状态设置为 true/false。