如果有人想知道如何在有一个或多个子节点的TypeScript中正确地做到这一点。我使用uuid库为子元素生成唯一的键属性，当然，如果只克隆一个元素，则不需要这些属性。

export type TParentGroup = {
  value?: string;
  children: React.ReactElement[] | React.ReactElement;
};

export const Parent = ({
  value = '',
  children,
}: TParentGroup): React.ReactElement => (
  <div className={styles.ParentGroup}>
    {Array.isArray(children)
      ? children.map((child) =>
          React.cloneElement(child, { key: uuidv4(), value })
        )
      : React.cloneElement(children, { value })}
  </div>
);

如您所见，此解决方案负责呈现ReactElement的数组或单个ReactElement，甚至允许您根据需要将属性传递给子组件。

也许您还可以发现这个特性很有用，尽管许多人认为这是一种反模式，但如果您知道自己在做什么并设计好解决方案，那么仍然可以使用它。

作为子组件的功能

下面是我的版本，适用于单个、多个和无效的子节点。

const addPropsToChildren = (children, props) => {
  const addPropsToChild = (child, props) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, props);
    } else {
      console.log("Invalid element: ", child);
      return child;
    }
  };
  if (Array.isArray(children)) {
    return children.map((child, ix) =>
      addPropsToChild(child, { key: ix, ...props })
    );
  } else {
    return addPropsToChild(children, props);
  }
};

使用的例子:

https://codesandbox.io/s/loving-mcclintock-59emq?file=/src/ChildVsChildren.jsx:0-1069

没有一个答案解决了子组件不是React组件的问题，比如文本字符串。变通方法可以是这样的:

// Render method of Parent component
render(){
    let props = {
        setAlert : () => {alert("It works")}
    };
    let childrenWithProps = React.Children.map( this.props.children, function(child) {
        if (React.isValidElement(child)){
            return React.cloneElement(child, props);
        }
          return child;
      });
    return <div>{childrenWithProps}</div>

}

有很多方法可以做到这一点。

你可以在parent中传递子元素作为道具。

例1:

function Parent({ChildElement}){
   return <ChildElement propName={propValue} />
}

return <Parent ChildElement={ChildComponent}/>

将子函数作为函数传递

例2:

function Parent({children}){
   return children({className: "my_div"})
}

OR

function Parent({children}){
   let Child = children
   return <Child className='my_div' />
}

function Child(props){
  return <div {...props}></div>
}

export <Parent>{props => <Child {...props} />}</Parent>

你可以使用React。在开始在应用程序中使用它之前，最好了解它的工作方式。它是在React v0.13中引入的，请继续阅读以获取更多信息，因此您将了解到以下内容:

<div>{React.cloneElement(this.props.children, {...this.props})}</div>

所以，请从React文档中找到这些行，让你了解它是如何工作的，以及如何使用它们:

在React v0.13 RC2中，我们将引入一个新的API，类似于 React.addons。cloneWithProps，用这个签名:

React.cloneElement(element, props, ...children);

与cloneWithProps不同，这个新函数没有任何魔力 出于同样的原因合并style和className的内置行为 我们在transferPropsTo中没有这个特性。没人能确定 所有魔法物品都是这样，所以 很难推理的代码和重用时的风格 有一个不同的签名(例如在即将到来的React Native中)。 反应。cloneElement几乎等同于:

<element.type {...element.props} {...props}>{children}</element.type>

然而，与JSX和cloneWithProps不同，它还保留了引用。这 意味着如果你得到一个有裁判的子球，你不会不小心 从你祖先那里偷来。你会得到相同的引用 你的新元素。 一种常见的模式是映射子元素并添加一个新道具。 有许多关于cloneWithProps失去ref的问题报道， 让你的代码更难推理。同样的道理 使用cloneElement的pattern将按预期工作。例如:

var newChildren = React.Children.map(this.props.children, function(child) {
  return React.cloneElement(child, { foo: true })
});

注意:反应。cloneElement(child， {ref: 'newRef'})会覆盖 所以这仍然是不可能的两个父母有一个裁判 相同的子元素，除非你使用callback-refs。 这是React 0.13的一个关键功能，因为现在有道具了 不可变的。升级路径通常是克隆元素，但通过 这样做你可能会失去裁判。因此，我们需要一个更好的升级 路径。当我们升级Facebook的呼叫网站时，我们意识到这一点 我们需要这个方法。我们从社区得到了同样的反馈。 因此我们决定在最终版本之前再做一个RC 一定要把这个弄进去。 我们计划最终弃用React.addons.cloneWithProps。我们不是 还在做，但这是一个开始思考的好机会 你可以考虑使用React。cloneElement代替。我们会 确保在我们真正发布之前发布一个带有弃用通知的版本 删除它，这样就不需要立即采取行动。

这里……