reactjs - 如何在React JS中发生事件(单击按钮)时将一个组件替换为另一个组件

Question

我有一个很长的数据显示列表，分为多个 block ，每个 block 的侧面都有一个编辑按钮，如下所示:

每当单击编辑按钮时，我需要用编辑组件替换显示组件，用这样的形式替换文本

最好的方法是什么？ 当单击“编辑”时，我尝试将组件作为列表放入状态中，并用表单组件替换显示组件 所以不要从 render() 返回它:

return(
 <Display />
 );

现在我回来了:

return(
 {this.state.components[0]}
  );

当单击按钮时执行此操作

this.setState({components:[<EditForm />]})

它有效，但我想知道将组件和 JSX 存储在状态中是一个好主意/专业实践吗？

Answer 1

你可以这样做: 使用状态变量来了解是否单击了编辑

state={
   isEdit:false,
  }

点击编辑: this.setState({isEdit:true})

在 render() 中使用条件渲染:

render(){
   return(
    <div>
        {(!this.state.isEdit) ? <Display /> : <EditForm />}
     </div>
       )
     }