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

Question

我正在开发一个用户个人资料页面，其中有许多框，每个框都有两种模式 - 查看和编辑。每个盒子都定义为一个 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。

谢谢!

Answer 1

您可以继续将 ViewMode 和 EditMode 作为子项呈现，而不是通过使用 ProfileBox 的 render 函数中的逻辑将它们作为 props 传递，类似于:

render: function() {
  var child = this.props.editMode ?
    <EditMode>
      ...
    </EditMode> :
    <ViewMode>
      ...
    </ViewMode>;

  return child;
}