Question

我试图编写一个将ID注入其子组件的组件。类似的东西：

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

预期输出为：<div id='someId'>Hello!</div>

每当我使用标准HTML组件（例如<div />，<span />等）时，我都可以使用它。但是，无论何时使用自定义组件，我都无法使用它。

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

<Id id='someId'><Foo>Child of Foo</Foo></Id>

以上不起作用，我不知道为什么。这是<Id />组件的样子：

import * as React from 'react'

export const Id = ({ children, id }) => (
    React.cloneElement(children, { id })
)

export default Id

更新：答案是我无法做到。

Answer 1

当你在做React.cloneElement(children, { id });时，你实际上正在创建一个反应组件并将道具传递给它。在这种情况下，{ id }与{ id: id }相同，这意味着您将变量id的值作为名为id的道具传递给Foo。您可以Foo从this.props.id访问id中的值。

您应该检索Foo中作为道具传递的span，然后将其传递给const Foo = ({ children, id }) => ( <span id={id}>{children}</span> );。

Foo

关于您在评论中提到的内容，您可以通过告诉const Foo = props => { return <span {...props}>{props.children}</span>; };传递所有道具来实现它，无论它是什么。类似的东西：

id

检查此更新的codesandbox。

如果您不希望组件知道它需要处理props，我认为没有任何其他方法可以实现它。 AFAIK，与HOC一起使用的大多数npm包需要知道需要处理的{{1}}的名称是什么。

将ID注入组件：自定义组件与＆＃34;原语＆＃34;之间的差异（<div>）组件？

1 个答案: