从父级调用子方法

Question

从父级调用子方法我有两个组成部分。父组件子组件我试图从父母那里调用孩子的方法，我试过这样做，但没有得到结果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 Parent extends Component {
 render() {
  return (
    <div>
      <Child setClick={click => this.clickChild = click}/>
      <button onClick={() => this.clickChild()}>Click</button>
    </div>
  );
 }}class Child extends Component {
 constructor(props) {
    super(props);
    this.getAlert = this.getAlert.bind(this);
 }
 componentDidMount() {
    this.props.setClick(this.getAlert);
 }
 getAlert() {
    alert('clicked');
 }
 render() {
  return (
    <h1 ref="hello">Hello</h1>
  );
 }}

它所做的就是设置父母的clickChild方法在安装子节点时使用。这样，当您单击父节点中的按钮时，它将调用clickChild这叫孩子的getAlert.

如果您的孩子是用connect()所以你不需要getWrappedInstance()黑客。

注意你不能用onClick={this.clickChild}在父级中，因为当父级呈现时，子级没有被挂载。this.clickChild还没有分配。使用onClick={() => this.clickChild()}很好，因为当您单击按钮时this.clickChild应该已经被分配了。