React - 从孩子身上移除道具

Question

我需要从孩子身上取下道具。

我有一个容器元素，它使用其子元素的属性来对子元素执行一些增强。该属性应该在渲染之前从孩子身上移除。

 <AsyncContainer>
   <Button onClick={this.asyncStuff} asyncHandler="onClick"/>
</AsyncContainer>

asyncHandler 属性应该在呈现之前从按钮中移除。

AsyncContainer 使用 React.cloneElement(child, properties) 。

我试过使 asyncHandler 属性无效，将其设置为未定义并从 child.props 中删除该属性。看来想要再摆脱这个属性是不可能的了。

原文由 AnAmuser 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我刚遇到这个问题。您可以只创建一个新元素并使用要传递的旧元素的类型和道具。我不确定这是否是反模式，我只是偶然发现它，到目前为止它似乎运行良好。

它应该看起来像这样：

 function AsyncContainer(props) {
  const child = React.Children.only(props.children)
  const { asyncHandler, ...childProps } = child.props
  // do asyncHandler stuff
  return React.createElement(child.type, childProps)
}

原文由 souporserious 发布，翻译遵循 CC BY-SA 3.0 许可协议