Question

如何将 props 传递给 React 中作为 props 传递的组件？

2020-11-23

7675

reactjs

我想将 props 传递给一个以如下方式传递的组件：

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

我试过了但是没有用：

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

我怎样才能让它工作？

Answer 1

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

<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

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

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

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