отправить функцию в качестве опоры для детей

Question

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

Parent

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} />
  )
}

child

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

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

Answer 1

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

 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>
   );

Answer 2

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

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} />
  )
}

child

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

Answer 3

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

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