Question

与标题中一样-在父组件中，我将函数作为prop传递给子组件，我想在子组件中运行此函数，但在子组件中运行该函数。

//parent component
<div>
    <Child myFunction={this.myFunction} />
</div>

并在子组件中创建新功能

//child component
    newFunction = () => {
        //someNewCode
        this.props.myFunction();
    }
    <button onClick={this.newFunction}>click me</button>

但是它不起作用。问题出在哪里？

Answer 1

以下应该起作用。

也许this.myFunction不是箭头功能，您忘记了绑定它。

class Parent extends React.Component {

  myFunction = () => {
    console.log("Luke, I am your father");
  };

  render() {
    return <Child myFunction={this.myFunction} />;
  }
}

class Child extends React.Component {

  newFunction = () => {
    this.props.myFunction();
  }

  render() {
    return <button onClick={this.newFunction}>click me</button>;
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

如何运行在子函数内作为道具传递的函数？

1 个答案: