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

}

对孩子的孩子组件反应传递功能

1 个答案: