Блог

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

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

#reactjs #jsx

Вопрос:

Допустим, у вас есть набор компонентов:

 var my_array = [ <SomeComponent1 textcolor={defaultFontColor} />, <MyComponent2 textcolor={defaultFontColor} />}, <SomeComponent3 textcolor={defaultFontColor} />}, ...]

И вы хотели выполнить итерацию по массиву, но также передать реквизиты компоненту (в примере, AComponent ):

 my_array.map(AComponent => {
      return (
        <View>
          {AComponent}
        </View>
      )
})

Как бы я передал опору {AComponent} в этом примере?

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

1. Как вы создаете массив компонентов для начала? Не проще ли было бы передать туда весь необходимый реквизит?

Ответ №1:

Рассматривайте компонент как объект json

 AComponent = {
   props:{
    prop1: "value for the prop1"
  }
}

Итак, теперь вы можете передать реквизит, который вы хотите, как

 my_array.map(AComponent => {
  AComponent.props["newProp"] = "propValue"
  return (
    <View>
      {AComponent}
    </View>
  )
})

Или, если вы хотите использовать реквизиты, переданные при перемещении компонента в массив, вы можете напрямую использовать их в методе render() компонента

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

1. Когда я пытаюсь это сделать, я получаю следующую ошибку: «Исключение компонента: попытка назначить свойство только для чтения»

2. jsfiddle.net/7gnLv48u Попробуйте React.cloneElement создать клон вашего компонента и добавить дополнительные реквизиты

3. Спасибо за jsfiddle, очень полезно!

Метки: