Home >Web Front-end >Front-end Q&A >How to call the method of child component in React parent component
Calling method: 1. Calls in class components can be implemented using React.createRef(), functional declaration of ref or props custom onRef attribute; 2. Calls in function components and Hook components can be implemented using UseImperativeHandle or forwardRef throws child component ref to achieve this.
#The operating environment of this tutorial: Windows7 system, react18 version, Dell G3 computer.
In React, we often call the method of the parent component in the child component, usually using props callback. But sometimes it is also necessary to call the child component's method in the parent component to achieve high cohesion. There are many methods, take them as needed.
Advantages: easy to understand, pointed by ref.
Disadvantages: Subcomponents using HOC are not available and cannot point to real subcomponents
For example, some commonly used writing methods, subcomponents wrapped by mobx's @observer are not This method applies.
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> ); } }
The usage method is the same as above, but the way of defining ref is different.
... <Sub ref={ref => this.sub = ref}></Sub> ...
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 (<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>) } }
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;
Use forwardRef to throw the ref of the subcomponent
This method is actually More suitable for custom HOC. But the problem is that withRouter, connect, Form.create and other methods cannot throw ref. If Child itself needs to nest these methods, then they basically cannot be used together. forwardRef itself is also used to throw refs of child elements, such as input and other native elements. It is not suitable for throwing component refs because the usage scenarios of components are too complex.
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;
There are two situations when a parent component calls a sub-component function
[Related recommendations:Redis video tutorial, Programming teaching】
The above is the detailed content of How to call the method of child component in React parent component. For more information, please follow other related articles on the PHP Chinese website!