React父组件如何调用子组件

本篇内容介绍了“React父组件如何调用子组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

调用方法：1、类组件中的调用可以利用React.createRef()、ref的函数式声明或props自定义onRef属性来实现；2、函数组件、Hook组件中的调用可以利用useImperativeHandle或forwardRef抛出子组件ref来实现。

在React中，我们经常在子组件中调用父组件的方法，一般用props回调即可。但是有时候也需要在父组件中调用子组件的方法，通过这种方法实现高内聚。有多种方法，请按需服用。

类组件中

1、React.createRef()

• 优点：通俗易懂，用ref指向。

• 缺点：使用了HOC的子组件不可用，无法指向真是子组件

  比如一些常用的写法，mobx的@observer包裹的子组件就不适用此方法。

import React, { Component } from 'react';class Sub extends Component {  callback() {    console.log('执行回调');  }  render() {    return <div>子组件</div>;  }}class Super extends Component {  constructor(props) {    super(props);    this.sub = React.createRef();  }  handleOnClick() {    this.sub.callback();  }  render() {    return (      <div>        <Sub ref={this.sub}></Sub>      </div>    );  }}

2、ref的函数式声明

• 优点：ref写法简洁

• 缺点：使用了HOC的子组件不可用，无法指向真是子组件（同上）

使用方法和上述的一样，就是定义ref的方式不同。

...<Sub ref={ref => this.sub = ref}></Sub>...

3、使用props自定义onRef属性

• 优点：假如子组件是嵌套了HOC，也可以指向真实子组件。

• 缺点：需要自定义props属性

import React, { Component } from 'react';import { observer } from 'mobx-react'@observerclass Sub extends Component {componentDidMount(){    // 将子组件指向父组件的变量this.props.onRef && this.props.onRef(this);}callback(){console.log("执行我")}render(){return (<div>子组件</div>);}}class Super extends Component {handleOnClick(){       // 可以调用子组件方法this.Sub.callback();}render(){return (          <div><div onClick={this.handleOnClick}>click</div><Sub onRef={ node => this.Sub = node }></Sub>     </div>)}}

函数组件、Hook组件

1、useImperativeHandle

• 优点：1、写法简单易懂2、假如子组件嵌套了HOC，也可以指向真实子组件

• 缺点：1、需要自定义props属性2、需要自定义暴露的方法

import React, { useImperativeHandle } from 'react';import { observer } from 'mobx-react'const Parent = () => {  let ChildRef = React.createRef();  function handleOnClick() {    ChildRef.current.func();  }  return (    <div>      <button onClick={handleOnClick}>click</button>      <Child onRef={ChildRef} />    </div>  );};const Child = observer(props => {  //用useImperativeHandle暴露一些外部ref能访问的属性  useImperativeHandle(props.onRef, () => {    // 需要将暴露的接口返回出去    return {      func: func,    };  });  function func() {    console.log('执行我');  }  return <div>子组件</div>;});export default Parent;

2、forwardRef

使用forwardRef抛出子组件的ref

这个方法其实更适合自定义HOC。但问题是，withRouter、connect、Form.create等方法并不能抛出ref，假如Child本身就需要嵌套这些方法，那基本就不能混着用了。forwardRef本身也是用来抛出子元素，如input等原生元素的ref的，并不适合做组件ref抛出，因为组件的使用场景太复杂了。

import React, { useRef, useImperativeHandle } from 'react';import ReactDOM from 'react-dom';import { observer } from 'mobx-react'const FancyInput = React.forwardRef((props, ref) => {  const inputRef = useRef();  useImperativeHandle(ref, () => ({    focus: () => {      inputRef.current.focus();    }  }));  return <input ref={inputRef} type="text" />});const Sub = observer(FancyInput)const App = props => {  const fancyInputRef = useRef();  return (    <div>      <FancyInput ref={fancyInputRef} />      <button        onClick={() => fancyInputRef.current.focus()}      >父组件调用子组件的 focus</button>    </div>  )}export default App;

“React父组件如何调用子组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！