JavaScript从父级调用子级方法

Z时代
2024-01-10
分类：问答

我有两个组成部分。

父组件

子组件

我试图从父级调用孩子的方法，我尝试过这种方法，但没有得到结果

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>
    );
  }
}

有没有一种方法可以从父级调用子级的方法？

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

回答：

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