本篇内容介绍了“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父组件如何调用子组件”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!