如何安全地将 props 注入 React children？

Question

我正在构建一个 React 组件，它会延迟卸载其子项以便为它们设置动画。卸载时，我想传入一个额外的道具（例如，数据属性或 class 名称）以处理动画。

这是一般情况下的一个具体实例，我想覆盖子项的某些属性。我开始意识到以下模式完全符合我的要求：

this.props.children.map(child => 
    <child.type key={child.key} 
                ref={child.ref}
               {...child.props} 
               // add my props into children here
               data-leaving={true} />)

我 return 一个具有相同类型和相同属性的新元素，而不是 return 子元素。然后我可以添加或删除我想要的任何道具！

然而，这是没有记录的，感觉很老套。我想知道这是否在任何情况下都可以安全使用。

请注意，我知道替代方案（例如，接受 return 子代而不是直接子代的函数）但这提供了迄今为止最方便的界面。

Answer 1

添加新道具或覆盖现有道具的最佳方式是映射您的子道具并使用 React.cloneElement 克隆每个元素。

阅读有关 react children 的好文章。

React.Children.map(this.props.children, child =>
    React.cloneElement(child, { newProp: 'value', existingProp: 'value' }));

您也可以使用 children 作为函数。这样你也可以添加你的道具。

示例：

// Root Component
const Parent = () => { 
  const onClose = () => console.log('I am on Close Prop');

  // Pass OnClose to children
  return <MyComponent>{ children(onClose) }</MyComponent>
}

// MyComponent
const MyComponent = () => {
// Pass OnClose to children
  return (
    <div>
      {/* children below */}
      {(onClose) => (
          <FormComponent
              myNewProp={onClose}
          />
      )}
    </div>
);

}

如何安全地将 props 注入 React children？

How to safely inject props into React children?

javascript

children

element

reactjs

react-props