React父组件如何调用子组件

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

我们提供的服务有:成都网站建设、网站建设、微信公众号开发、网站优化、网站认证、梁山ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的梁山网站制作公司

调用方法: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 
子组件
;   } } 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'

@observer
class 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

import React, { useImperativeHandle } from 'react';
import { observer } from 'mobx-react'


const Parent = () => {
  let ChildRef = React.createRef();

  function handleOnClick() {
    ChildRef.current.func();
  }

  return (
    
      click            
  ); }; 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;

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


文章名称:React父组件如何调用子组件
URL分享:http://bzwzjz.com/article/ijiooi.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都营销网站建设 手机网站制作设计 梓潼网站设计 成都网站建设 成都定制网站建设 温江网站设计 成都响应式网站建设 手机网站制作 专业网站设计 成都网站建设 网站建设 网站建设费用 成都网站建设 网站制作公司 响应式网站设计方案 高端网站建设 成都网站制作 营销型网站建设 成都网站设计 成都网站制作 成都网站设计 成都定制网站建设