在 React 中处理 Child 中的 Parent 函数调用

Question

是否可以在 React Parent class 中创建一个方法，然后将其传递给 Child 并在那里使用它。

所以基本上我会在 Parent class 中创建一个按钮，将函数传递给 Child，当单击按钮时，child 将知道它但 Parent 不会真正关心它吗？

class App extends Component {
  clickMade = () => {
    //This should be left empty
  };

  render() {
    return (
      <div className="App">
        <Button onClick={this.clickMade}>Click me </Button>
        <Child clickMade={this.clickMade} />
      </div>
    );
  }
}

export default App;

和Child：

class Child extends Component {

  constructor(props) {
    super(props);

    this.handleClick = this.props.clickMade.bind(this);
  }

  handleClick = () => {
    console.log("Click in child");
  }

  render() {
    return null;
  }
}

export default Child;

还有一个沙箱：CodeSandbox

Answer 1

App.js

class App extends Component {

  clickMade = () => {
    this.childRef.handleClick();
  };

  render() {
    return (
      <div className="App">
        <Button onClick={this.clickMade}>Click me </Button>
        <Child
          ref={ref => {
           this.childRef = ref;
          }}
        />
      </div>
    );
  }
}

在 React 中处理 Child 中的 Parent 函数调用

Handling Parent function call in Child in React

methods

parent-child

reactjs

react-native