Question

我正在开发一个用户个人资料页面，其中有许多框，每个框有两种模式 - 查看和编辑。每个框都定义为反应类<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函数中的逻辑将它们作为道具传递，类似于：

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

  return child;
}

Answer 2

你可以这样做：

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

或者您可以在此代码中有条件地呈现EditMode / ViewMode。为了减少丑陋，精心设计的mixin会创造奇迹。很难说出你的问题的具体要求是什么，但要看看你所有<ProfileBox/>使用的共同点，以及它们的不同之处。

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

如何在reactjs中更好地在视图和编辑模式之间切换

2 个答案: