从父级调用子方法

Question

从父级调用子方法

我有两个组成部分。

1. 父组件
2. 子组件

我试图从父母那里调用孩子的方法，我试过这样做，但没有得到结果

class Parent extends Component {
  render() {
    return (
      <Child>
        <button onClick={Child.getAlert()}>Click</button>
      </Child>
      );
    }
  }class Child extends Component {
  getAlert() {
    alert('clicked');
  }

  render() {
    return (
      <h1 ref="hello">Hello</h1>
    );
  }}

有办法从父级调用子方法吗？

注意：子组件和父组件位于两个不同的文件中。

Answer 1

您可以在这里使用另一个模式：class&nbsp;Parent&nbsp;extends&nbsp;Component&nbsp;{ &nbsp;render()&nbsp;{ &nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Child&nbsp;setClick={click&nbsp;=>&nbsp;this.clickChild&nbsp;=&nbsp;click}/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;onClick={()&nbsp;=>&nbsp;this.clickChild()}>Click</button> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;); &nbsp;}}class&nbsp;Child&nbsp;extends&nbsp;Component&nbsp;{ &nbsp;constructor(props)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;super(props); &nbsp;&nbsp;&nbsp;&nbsp;this.getAlert&nbsp;=&nbsp;this.getAlert.bind(this); &nbsp;} &nbsp;componentDidMount()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.props.setClick(this.getAlert); &nbsp;} &nbsp;getAlert()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;alert('clicked'); &nbsp;} &nbsp;render()&nbsp;{ &nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;<h1&nbsp;ref="hello">Hello</h1> &nbsp;&nbsp;); &nbsp;}}它所做的就是设置父母的clickChild方法在安装子节点时使用。这样，当您单击父节点中的按钮时，它将调用clickChild这叫孩子的getAlert.如果您的孩子是用connect()所以你不需要getWrappedInstance()黑客。注意你不能用onClick={this.clickChild}在父级中，因为当父级呈现时，子级没有被挂载。this.clickChild还没有分配。使用onClick={() => this.clickChild()}很好，因为当您单击按钮时this.clickChild应该已经被分配了。