Отправить функцию как опору детям

У меня есть класс, в котором есть данные, и я пытаюсь отправить данные в качестве параметров для элемента выбора в дочернем элементе.

Родитель

constructor(){
  super();
  this.state = {
    value: [{key: '1', name: 'aaa'}, {key: '2', value: 'bbb'}],
  }
}
render(){
  const childProps = {
    getVal(){
    const val = this.state.value;
      return val.map((item) => {
        return (<option value = {item.name}>{item.name}</option>);
      });
    }
  };

  return(
    //codes
    <Child {...childProps} />
  )
}

ребенок

export const Child = ({ getVal }) => (
  <select>
    {getVal}
  </select>
);
Child.propTypes = {
  getVal: PropTypes.func,
};

Но я не получаю никаких значений по выбранным мной параметрам. Там написано, что не найдено. Может кто-нибудь мне помочь? Спасибо

getVal - это функция, ее нужно вызвать, например: {getVal()}, примечание =====> ()

— 11.06.2018 07:30

reactjs select parent-child react-props

11.06.2018 07:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Ответы 3

Попробуйте это, вы не вызываете функцию.

export const Child = ({ getVal }) => (
  <select>
    {getVal()}
  </select>
);
Child.propTypes = {
  getVal: PropTypes.func,
};

Можете ли вы поделиться примером песочницы того, чего вы пытаетесь достичь. Смотрю вопросы вроде очень простые, но выяснить не удалось. песочница может помочь

— 11.06.2018 09:05

11.06.2018 07:31

Вы можете попробовать, как показано ниже

 constructor(){
      super();
      this.state = {
        value: [{key: '1', name: 'aaa'}, {key: '2', value: 'bbb'}],
      }
      this.getVal = this.bind.getVal(this)
    }
    render(){
        getVal(){
          const val = this.state.value;
          return val.map((item) => {
            return (<option value = {item.name}>{item.name}</option>);
          });
        }


      return(
        //codes
        <Child getVal  = {this.getVal} />
      )
    }

Получить функцию getVal как реквизит

    export const Child (
     <select>
        {this.props.getVal}
     </select>
   );

11.06.2018 07:40

Не рекомендуется добавлять функции в метод рендеринга. Ведь всякий раз, когда рендеринг будет вызван, функции будут построены снова. Итак, вы можете сделать это так:

constructor(){
  super();
  this.state = {
    value: [{key: '1', name: 'aaa'}, {key: '2', value: 'bbb'}],
  }
}

getVal = () => this.state.value.map((item) => (
   <Option value = {item.name} key = {item.name}>{item.name}</Option>
));

render(){    
  return(
    <Child getVal = {() => this.getVal} />
  )
}

ребенок

export const Child = ({ getVal }) => (
  <select>
    {getVal()}
  </select>
);
Child.propTypes = {
  getVal: PropTypes.func,
};

11.06.2018 07:58

Другие вопросы по теме

Фильтровать строки, когда все столбцы больше значения

Я пытаюсь получить информацию из 4 разных таблиц одной базы данных

RuntimeException вызвано SQLiteException, синтаксическая ошибка

Выберите Случайные записи из таблицы, но для каждого региона; 3 записи из каждого из 4 регионов и 18 записей из оставшихся 2 регионов

Форма Angular (6) выбирает выбранный элемент в select после http get

Получить имя каждого поля в таблице sql

Java.lang.ClassNotFoundException: model.Database (таблица)

Как я могу подсчитать до 3-х выбранных операторов?

Запрос на добавление столбцов на основе совпадающего значения

PostgreSQL: объединить 2 таблицы на основе столбца массива (внешнего ключа)

Отправить функцию как опору детям

Ответы 3

Другие вопросы по теме

Похожие вопросы