小编典典

JavaScript从父级调用子级方法

javascript

我有两个组成部分。

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

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

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


阅读 517

收藏
2020-04-25

共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>
2020-04-25