将函数传递给孩子的子组件

Question

我想将一个函数从父组件传递给子组件，但显示为“未定义”

我了解如何将函数从父级传递给子级：

class Child extends Component {
  render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

class Parent extends Component {
    passedFunction = () => {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

(Reference: past question)

但是我如何正确地传递给 GrandChild：

class GranChild extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

class Child extends Component {
    render() {
        <GranChild passedFunction={this.passedFunction}/>
    }
}

class Parent extends Component {
    passedFunction = () => {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

Answer 1

将您的子函数重构为：

class Child extends Component {
render() {
    <GranChild passedFunction={this.props.passedFunction}/>
}

}