环球速讯：React父组件怎么调用子组件的方法

(资料图片仅供参考)

本教程操作环境：Windows7系统、react18版、Dell G3电脑。

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

类组件中

1、React.createRef()

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

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

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

import React, { Component } from "react";class Sub extends Component {  callback() {    console.log("执行回调");  }  render() {    return 子组件
;  }}class Super extends Component {  constructor(props) {    super(props);    this.sub = React.createRef();  }  handleOnClick() {    this.sub.callback();  }  render() {    return (                    
    );  }}
登录后复制

2、ref的函数式声明

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

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

..._{this.sub = ref}>}...
登录后复制

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 (子组件
);}}class Super extends Component {handleOnClick(){       // 可以调用子组件方法this.Sub.callback();}render(){return (          click
_{this.Sub = node }>}     
)}}
登录后复制

函数组件、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 (                    
  );};const Child = observer(props => {  //用useImperativeHandle暴露一些外部ref能访问的属性  useImperativeHandle(props.onRef, () => {    // 需要将暴露的接口返回出去    return {      func: func,    };  });  function func() {    console.log("执行我");  }  return 子组件
;});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 });const Sub = observer(FancyInput)const App = props => {  const fancyInputRef = useRef();  return (                    
  )}export default App;
登录后复制

总结

父组件调子组件函数有两种情况

子组件无HOC嵌套：推荐使用ref直接调用有HOC嵌套：推荐使用自定义props的方式

【相关推荐：Redis视频教程、编程教学】

以上就是React父组件怎么调用子组件的方法的详细内容，更多请关注php中文网其它相关文章！

关键词：相关文章视频教程