React - 从孩子身上移除道具

Question

我需要从一个孩子身上移除一个道具。

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

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

asyncHandler 属性应该在渲染之前从按钮中移除。

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

我已尝试将 asyncHandler 属性设为空，将其设置为未定义并从 child.props 中删除该属性。看来再也无法摆脱这个属性了。

Answer 1

根据 cmets，您不能直接修改道具，因为它们是不可变的。

但是，我认为我有一个简单的解决方案来解决这个问题。我不知道它是什么库或它是如何工作的，所以这可能有效也可能无效。但是，这是关于如何在组件安装之前移除道具的一般答案。

话虽如此，我会尝试创建自己的组件来呈现<Button />：

class MyButtonComponent extends React.Component {

...

  render() {
    return <Button onClick={this.props.onClickHandler} />;
  }
}

然后在你想要做增强的组件中：

render() {
  <AsyncContainer>
    <MyButtonComponent onClickHandler={this.asyncStuff} asyncHandler="onClick"/>
  </AsyncContainer>
}

这样你在<Button /> 组件上维护你的onClick 事件监听器，但你不会传递非法的asyncHandler 属性。

---

编辑：

或者，您也可以这样做：

class MyButtonComponent extends React.Component {

...

  componentWillMount() {
    let newProps = this.props;
    delete newProps.asyncHandler;
    this.setState({properties: newProps}):
  }

  render() {
    return <Button {...this.state.properties} />;
  }
}

这会将所有道具（带有spread operator）应用于<Button />，除了asyncHandler，我们在安装组件之前通过在state中创建props的副本来删除它，但带有@ 987654334@ 已删除。

也检查this answer我给了一个类似的问题。

Answer 2

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

它应该看起来像这样：

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

Answer 3

function AsyncContainer(props) {
  const child = React.Children.only(props.children);
  return React.cloneElement(
    child,
    { asyncHandler: undefined }
  );
}

工作原理

1. 您使用React.cloneElement 克隆元素，因为元素是不可变的，更改其道具的唯一方法是创建克隆。
2. 使用第二个React.cloneElement 参数添加新道具和删除旧道具。不需要的道具应该分配给undefined。您需要这样做，因为默认情况下克隆的元素会与其所有道具一起克隆。