Блог

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

Как передать значение дочернему компоненту в react

#json #reactjs #react-bootstrap

#json #reactjs #react-bootstrap

Вопрос:

У меня есть два компонента, один из которых вызывает другой. В этом случае мой компонент Entries имеет строку ниже.

 <TypeIcon typeicon={entry.type} />

Эта строка вызывает приведенный ниже компонент TypeIcon .

 import React from 'react';

import '../../App.css'




function TypeIcon (props){

  return (
    <span><i class="fa fa-file-text" aria-hidden="true"></i></span>
  )
}

export default TypeIcon

То, что я пытаюсь сделать, это выполнить некоторый условный рендеринг type значения (показать значок документа или значок воспроизведения), который включен в значение entry . Приведенный ниже JSON сопоставляется с entry :

 [{
    "domain": "https://matangitonga.to",
    "publishdate": "2017-09-06",
    "title": "Tonga's general election set for November 16",
    "type": "article",
    "language": "EN",
    "event_id": 1,
    "id": 1,
    "url": "https://matangitonga.to/2017/09/06/tongas-general-election-set-november-16"
}]

С чем у меня возникли проблемы, так это с тем, как правильно передать либо entry или entry.type TypeIcon в.

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

1. Не совсем понятно, что не работает. Присваиваете ли вы значение свойству json entry.type после его извлечения?

2. Неясно, о чем вы спрашиваете; вы передаете его (предполагая, что вы извлекли его из массива с помощью map или явной ссылки на массив).

3. Я пробовал это несколькими способами. Один раз как entry.type, а другой раз как entry. Суть проблемы в том, как присвоить его переменной в дочернем компоненте, а затем отобразить его.

Ответ №1:

если вы передаете значение как

 <TypeIcon typeicon={entry.type} />

затем вы можете получить к нему доступ в дочернем компоненте как

 {props.typeicon}

потому что все ваши реквизиты передаются через объект props, а typeicon — это просто ключ в вашем объекте props

если вы передадите весь объект entry, вы сможете получить доступ к значку в вашем дочернем компоненте как.

 {props.typeicon.type}

поскольку весь объект entry становится значением для ключа typeicon, и для доступа к свойству type вам нужно получить к нему доступ на один шаг глубже

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

1. Моя ошибка заключалась в том, что я думал, что переменная, которую я создавал как prop typeicon={entry.type} , может ссылаться по-разному в дочернем компоненте {props.type}