React.js对this.props.children的设计实践

React.js design practice for this.props.children

本文关键字：children js this props React      更新时间：2023-09-26

我想我正在跟上React的速度，但有一件事我不确定，那就是如何做得最好。

我有一个页面，上面有三个小部件。由于我希望在所有小部件上具有相同的行为和样式，因此我将每个组件包装在一个<PageAreaTemplate/>标记中，该标记负责样式和布局。使用这种方法的一个原因是，在不需要PageAreaTemplate或其他模板的地方，我也使用了内部组件。

在PageAreaTemplate中，我简单地将this.props.children包裹在样式化所需的组件中。

现在我需要让一些小部件在PageAreaTemplate的标题中添加工具栏(每个工具栏不同)(如果它被模板包装)。通过克隆children并在PageAreaTemplate中添加setToolbar函数，这是可行的，但这肯定感觉不对。

你的经验是什么是最好的方法来实现这一点?

通常的做法是接受一个子元素，克隆它，然后稍微修改一下返回——无论是添加额外的属性还是功能。

function renderChildren(props) {
  return React.Children.map(props.children, child => {
    return React.cloneElement(child, {
      setToolbar: () => ()
    })
  })
}

这只是扩展当前子元素，就像你说的，Object.assign，而不是操纵当前子元素。

上面的函数应该允许你添加任何需要的逻辑，以确保你得到你想要的。检查组件的类型或某些属性值

我使用@kelly-j-andrews建议的方法解决了我的问题，在父组件上设置工具栏，但它需要更多的技巧，通过设置内部组件的状态来真正使工具栏上的更新工作并可见(内部组件的工具栏部分)，因为内部组件上的更新不会触发父组件的渲染。

我最后做的是:

  1. 在外部组件(PageAreaTemplate)中，我克隆了每个子组件并根据上面的示例修改了它。
  2. 在内部组件中，在生命周期函数调用componentDidMount中执行setToolbar设置初始组件
  3. 由于单击工具栏上的按钮会改变内部组件的状态，因此我再次在componentDidUpdate上设置工具栏(setToolbar)以强制渲染外部组件。在较早的阶段调用setToolbar会产生一个反映更新前状态的工具栏。

这可能不是什么新东西，但是因为我的问题不仅是能够在父组件中设置组件，而且还要确保内部组件的状态正确反映在工具栏中，我回答了我自己的问题。

它仍然不像是一个最佳的解决方案，但再次，它是有效的…!

相关文章：