将 Props 传递给孙子 React

Question

Child:

class Plus extends React.Component{
  constructor(props){
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(){
    console.log('It's Working!')
    this.props.handleButtonChange()
  }

  render(){
    return (
      <div>
        <i
          className="fa fa-plus fa-2x"
          onClick={() => this.handleClick()}
        ></i>
      </div>
    );
  }
}

export default Plus;

Parent:

class NoteCreation extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="note-creation">
        <form action="">
          <Plus handleButtonChange={this.props.handleButtonChange} />
        </form>
      </div>
    );
  }
}

export default NoteCreation;

大Parent 分量：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      buttonStat : false
    };
    this.handleButtonChange = this.handleButtonChange(this);

  }

  handleButtonChange(){
    this.setState({
      buttonStat : true
    })
  }


  render() {

    return (
      <div className="App">
        <NoteCreation
          handleButtonChange={this.handleButtonChange}
        />
      </div>
    );
  }
}

export default App;

我只是想将方法 handleButtonChange() 从 grandParent 一直传递到 child（这是一个按钮），当单击按钮时它会触发触发的单击事件启动此功能，在祖父组件中进行更改（即设置按钮状态）我哪里错了或者这种方法是完全错误的我真的很陌生。我只想通过 child 单击事件在 grandParent 中设置状态。我不断收到此错误 TypeError: this.props.handleButtonChange is not a function 将不胜感激

Answer 1

你的顶部组件有错字

应该是

this.handleButtonChange = this.handleButtonChange.bind(this);

而不是

this.handleButtonChange = this.handleButtonChange(this);

或者你可以像这样声明你的方法

  handleButtonChange = () => {
    this.setState({
      buttonStat : true
    })
  }

根本不使用 bind。

Answer 2

在grandParent组件中，需要通过关键字bind绑定到当前组件，通过props传递。 this.handleButtonChange = this.handleButtonChange.bind(this);

将 Props 传递给孙子 React

Passing Props to grandchild React

javascript

reactjs

react-props

react-class-based-component