Question

我正在尝试为特定的React组件添加一个prop，而不是所有组件的子组件。

添加道具的功能类似于以下代码：

addProps (children) {
const childProps = { doSomething: this.doSomething };

const recursiveAddProps = (children) => {
    return React.Children.map(children, child => {
    if (child.type !== GrandChild){
      if (child.props) recursiveAddProps(child.props.children);
      return child;
    }
    return React.cloneElement(child, childProps);
  });
}
return recursiveAddProps(children);
}

Example

但是，这并没有将函数doSomething添加到GrandChild组件，因此在单击组件时不会触发onClick事件。

你会做什么？谢谢你的帮助！

Answer 1

您没有克隆中间子项并忽略recursiveAddProps的返回值。 cloneElement不会变异所以你需要这样做（未经测试）：

const recursiveAddProps = (children) => {
  return React.Children.map(children, child => {
    if (child.type !== GrandChild) {
      if (child.props) return React.cloneElement(child, {
          children: recursiveAddProps(child.props.children),
      });
      return child;
    }
    return React.cloneElement(child, childProps);
  });
}

如何通过克隆React中的元素将prop添加到特定元素？

1 个答案: