Javascript 将ID注入组件：自定义组件和；原始的；（<；div/>；）组件？

我试图编写一个组件，将ID注入到它的子组件中。比如：

<Id id='someId'>
    <div>Hello!</div>
</Id>

const Foo = props => {
   return <span {...props}>{props.children}</span>;
};

---

---

更新：答案是我做不到。

当你在做

React.cloneElement（children，{id}），实际上您正在创建一个react组件并向其中传递道具。在这种情况下，
{id}
与
{id:id}
相同，这意味着您将变量
id
的值作为名为
id
的道具传递给
Foo
。您可以从
this.props.id
访问
Foo
中的值

您应该在
Foo
中检索作为道具传递的
id
，然后将其作为
span
传递

const Foo = ({ children, id }) => (
    <span id={id}>{children}</span>
);

检查此更新

如果您不想让组件意识到它需要处理
id
，我认为没有其他方法可以实现它。另外，大多数与HOC一起工作的npm包都需要知道需要处理的
props
的名称
 接下来的问题是：如果我想要一个将ID注入子组件的HoC，我该怎么办。我之所以要做这个组件，是因为我不想让子组件知道它需要处理ID。按照你的建议做会破坏目的。我明白了，所以我可能需要重新审视结构并重新评估需求。。。谢谢你的回答。
const Foo = ({ children, id }) => (
    <span id={id}>{children}</span>
);

const Foo = props => {
   return <span {...props}>{props.children}</span>;
};