javascript - 如何更好地在reactjs中的 View 和编辑模式之间切换

我正在开发一个用户个人资料页面，该页面上有许多带有两种模式的框-查看和编辑。每个框都定义为react类<ProfileBox> ... </ProfileBox>。
对于每个框的查看和编辑模式，我定义了<EditMode> ... </EditMode>和<ViewMode>...</ViewMode>类。最终我想渲染例如像这样的地址

<ProfileBox editMode={true}>
  <EditMode>
    ...
  </EditMode>
  <ViewMode>
   ...
  </ViewMode>
</ProfileBox>

我希望逻辑位于ProfileBox中。我当前的方法是迭代所有子项，如果它们是ViewMode或EditMode类型，则对其进行过滤。为时已晚，我意识到只要执行以下操作，这种情况就会崩溃:

<ProfileBox editMode={true}>
  <EditMode>
    ...
  </EditMode>
  <div>
    <ViewMode>
      ...
    </ViewMode>
  </div>
</ProfileBox>

我怎样才能做得更好？标准方法是什么？我不需要手动关心将ID或状态传递给地址定义中的Edit和ViewMode。

谢谢!

最佳答案

你可以做:

<ProfileBox editMode={this.state.editingWhatever} onModeChange={this.updateEditingWhatever}
  editView={ <EditMode>...</EditMode> }
  viewView={ <div><ViewMode>...</ViewMode></div> }
/>

或者，您可以在此代码中有条件地呈现EditMode / ViewMode。为了使它不那么难看，精心设计的mixin会产生奇迹。很难说出您的问题的确切要求是什么，但是请看一下您所有<ProfileBox/>用法的共同点以及区别。

在上面显示的更简单的情况下，您可能只想动态创建onModeChange处理程序，以及在编辑模式下为所有输入子级创建onChange处理程序。