如何将道具传递给在 React 中作为道具传递的组件？

Question

我想将道具传递给作为道具传递的组件，如下所示：

<Field
      name="persons"
      component={Persons} 
/>

我试过这个，但没有用：

component={<Person prop={prop} />}

我怎样才能使这项工作？

Answer 1

您可以在两个不同的属性中传递组件类型和道具

<Foo component={Bar} componentProps={...} />

然后在Foo组件中，您执行此操作

 render() {
    const Component = this.props.component;
    const props = this.props.componentProps;
    return <div> ... <Component {...props}/> ...</div>
 }

或者你可以传递一个函数来呈现你这样的组件

<Foo component={() => <Bar props />}/>

然后在Foo组件中，您执行此操作

 render() {
    return <div> ... {this.props.component()} ...</div>
 }

或者你可以按照你在这个问题中的建议做

<Foo component={<Bar props/>}/>

然后在Foo组件中，您执行此操作

 render() {
    return <div> ... {this.props.component} ...</div>
 }

这完全取决于您将如何使用Foo组件中传递的组件，或者在您的情况下是Field组件

Answer 2

组件只不过是一个返回反应组件的函数。 当您执行<Person prop={prop} />您实际上是在以 jsx 样式调用该函数。

因此，您需要将Person组件包装到另一个返回Person函数中，例如：

// props here is in case <Field> pass some props to component
component={(props) => <Person {...props} prop={prop} />}