Блог

Главная - Вопросы по программированию - Как передать реквизит компоненту, переданному как реквизит в React?

Как передать реквизит компоненту, переданному как реквизит в React?

#reactjs

#reactjs

Вопрос:

Я хочу передать реквизит компоненту, который передается как реквизит, подобный этому:

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

Я пробовал это, но это не сработало:

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

Как я могу заставить это работать?

Комментарии:

1. как вы будете использовать переданный компонент?

2. В виде диалогового окна / всплывающего окна, и я хочу передать статус показать / скрыть и функцию показать и скрыть

Ответ №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 , компонент

Комментарии:

1. @DennisVash вы знакомы с реквизитами рендеринга? reactjs.org/docs/render-props.html

2. Моя ошибка, вы правы, хотя у него другое поведение, просто проверил его

Ответ №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} />}
Метки: ,