javascript - React.js this.props.children 的设计实践

Question

我认为我正在快速了解 React，但我不确定的一件事是如何做得最好。

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

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

现在我需要让一些小部件将工具栏(每个小部件都不同)添加到 PageAreaTemplate 中的标题中(如果它被模板包裹)。可以通过克隆 children 来实现并添加一个功能setToolbar在PageAreaTemplate但这肯定感觉不对。

您的经验是实现这一目标的最佳方法是什么？

Answer 1

采用子元素、克隆它并返回稍微修改过的元素是相当常见的做法 - 无论是添加附加属性还是功能。

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

正如您所说，这只是扩展当前子级，Object.assign 而不是操纵当前子级。

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