JavaScript从父级调用子级方法

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

首先，让我表示，这通常不是在React领域中解决问题的方法。通常，您要做的是在props中将功能传递给子级，并在事件中传递子级的通知（或者更好的是：）dispatch。

但是，如果必须在子组件上公开命令式方法，则可以使用refs。请记住，这是一个逃生舱口，通常表示可以使用更好的设计。

以前，仅基于类的组件才支持引用。随着React Hooks的出现，情况不再如此

使用挂钩和功能组件（>= react@16.8）

const { forwardRef, useRef, useImperativeHandle } = React;



// We need to wrap component in `forwardRef` in order to gain

// access to the ref object that is assigned using the `ref` prop.

// This ref is passed as the second parameter to the function component.

const Child = forwardRef((props, ref) => {



  // The component instance will be extended

  // with whatever you return from the callback passed

  // as the second argument

  useImperativeHandle(ref, () => ({



    getAlert() {

      alert("getAlert from Child");

    }



  }));



  return <h1>Hi</h1>;

});



const Parent = () => {

  // In order to gain access to the child component instance,

  // you need to assign it to a `ref`, so we call `useRef()` to get one

  const childRef = useRef();



  return (

    <div>

      <Child ref={childRef} />

      <button onClick={() => childRef.current.getAlert()}>Click</button>

    </div>

  );

};



ReactDOM.render(

  <Parent />,

  document.getElementById('root')

);


<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>



<div id="root"></div>

对于文档useImperativeHandle()是在这里：

useImperativeHandle自定义使用时暴露给父组件的实例值ref。

使用类组件（>= react@16.4）

const { Component } = React;



class Parent extends Component {

  constructor(props) {

    super(props);

    this.child = React.createRef();

  }



  onClick = () => {

    this.child.current.getAlert();

  };



  render() {

    return (

      <div>

        <Child ref={this.child} />

        <button onClick={this.onClick}>Click</button>

      </div>

    );

  }

}



class Child extends Component {

  getAlert() {

    alert('getAlert from Child');

  }



  render() {

    return <h1>Hello</h1>;

  }

}



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


<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<div id="root"></div>

旧版API（<= react@16.3）

出于历史目的，这是您在16.3之前的React版本中使用的基于回调的样式：

const { Component } = React;

const { render } = ReactDOM;



class Parent extends Component {

  render() {

    return (

      <div>

        <Child ref={instance => { this.child = instance; }} />

        <button onClick={() => { this.child.getAlert(); }}>Click</button>

      </div>

    );

  }

}



class Child extends Component {

  getAlert() {

    alert('clicked');

  }



  render() {

    return (

      <h1>Hello</h1>

    );

  }

}





render(

  <Parent />,

  document.getElementById('app')

);


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>



<div id="app"></div>