从父级调用子级方法

Question

我有两个组成部分：

1. 父组件
2. 子组件

我试图从Parent调用child的方法,我尝试了这种方法,但无法得到结果：

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

它所做的是在挂载child时设置父级的clickchild方法。这样，当您单击parent中的按钮时，它将调用ClickChild，后者将调用Child的GetAlert。

如果您的孩子是用connect()包装的，这样您就不需要getWrappedInstance()hack了，那么这也同样有效。

注意，您不能在parent中使用onclick={this.clickchild}，因为呈现parent时没有挂载child，因此尚未分配this.clickchild。使用onClick={()=>This.ClickChild()}是很好的，因为当您单击按钮This.ClickChild时，应该已经分配了。

Answer 2

首先，让我表示，这通常不是在React土地上处理事情的方式。通常，您想要做的是将功能传递给道具中的子级，并在事件中传递子级的通知（或者更好的方法:dispatch)。

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

以前，只支持基于类的组件使用refs。随着反应钩的出现，情况就不再是这样了

null

js prettyprint-override">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>