JavaScript从父级调用子级方法

JavaScript从父级调用子级方法

首先，让我表示，这通常不是在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>