如何将函数传递到ReactJS中的子（兄弟）组件中？

Question

 import React from 'react';
 import mind_zebra from '../../images/MindScribe-zebra.png';
 import Dropdown from './Dropdown/Dropdown.js';

 export default class Entry extends React.Component {
     constructor (props) {
     super(props);

     this.state = {
      value : "1",
      hideZebraPic : false,
     }

     this.changeLanguage = this.changeLanguage.bind(this);
    }

     onClickHandler = () => {
     this.setState( prev => ({ hideZebraPic: !prev.hideZebraPic}));
    };

     changeLanguage (event) {
     console.log("hello");
     this.setState({ value: event.target.value });
    }

    render() {
      if (this.state.hideZebraPic) {
      return (
        <div>
          <Dropdown langueageSelection={this.changeLanguage}/>
        </div>
    );
    } else {
      return (
        <div>
          <img src={mind_zebra} onClick={this.onClickHandler} className="MindZebraPic" alt="zebra"/>
        </div>
      );
    }
  }
}

一个子：下拉组件

import React from 'react';

export default class Dropdown extends React.Component {

  changeLanguage(event) {
    this.setState({ value: event.target.value });
    console.log("hello");
  }

  render () {
    return (
      <form >
        <label>
          <div className="langueageSelection">
            <select onChange={this.handleChange}>

              <option value=""> Please select a language </option>
              <option value="1"> English </option>
              <option value="2"> Chinese </option>
            </select>
          </div>
        </label>
      </form>
    );
  }
}

第二个子：播放列表组件

import React from 'react';

export default class Playlist extends React.Component {

  render() {
    if (this.props.langueageSelection === "1"){
      console.log("English");

    }
    else if(this.props.langueageSelection === "2"){
      console.log("Chinese");
    }
    return (
      <div> Hi</div>
    );
  }
}

Answer 1

首先，在下拉组件中，您使用的是this.setstate，但没有state。

在Entry组件中使用getter函数。

 this.state = {
      value : "1",
      hideZebraPic : false,
      Language:'',
     }

getLanguage = (language) => this.setState({Language:language})

将函数getLanguage作为下拉的道具向下传递。

<Dropdown getLanguage={this.getLanguage}/>

 <select onChange={(e) => this.props.getLanguage(e.target.value)}>
              <option value=""> Please select a language </option>
              <option value="1"> English </option>
              <option value="2"> Chinese </option>
            </select>