站長資訊網
調用方法：1、類組件中的調用可以利用React.createRef()、ref的函數式聲明或props自定義onRef屬性來實現；2、函數組件、Hook組件中的調用可以利用useImperativeHandle或forwardRef拋出子組件ref來實現。
本教程操作環境：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 <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' @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>) } }
登錄后復制
函數組件、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;
登錄后復制
總結
父組件調子組件函數有兩種情況
- 子組件無HOC嵌套：推薦使用ref直接調用
- 有HOC嵌套：推薦使用自定義props的方式
【
