(資料圖片僅供參考)
本教程操作環(huán)境：Windows7系統(tǒng)、react18版、Dell G3電腦。
在React中，我們經(jīng)常在子組件中調(diào)用父組件的方法，一般用props回調(diào)即可。但是有時(shí)候也需要在父組件中調(diào)用子組件的方法，通過(guò)這種方法實(shí)現(xiàn)高內(nèi)聚。有多種方法，請(qǐng)按需服用。
優(yōu)點(diǎn)：通俗易懂，用ref指向。
缺點(diǎn)：使用了HOC的子組件不可用，無(wú)法指向真是子組件
比如一些常用的寫(xiě)法，mobx的@observer包裹的子組件就不適用此方法。
import React, { Component } from "react";class Sub extends Component { callback() { console.log("執(zhí)行回調(diào)"); } 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> ); }}使用方法和上述的一樣，就是定義ref的方式不同。
...<Sub ref={ref => this.sub = ref}></Sub>...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("執(zhí)行我")}render(){return (<div>子組件</div>);}}class Super extends Component {handleOnClick(){ // 可以調(diào)用子組件方法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能訪問(wèn)的屬性 useImperativeHandle(props.onRef, () => { // 需要將暴露的接口返回出去 return { func: func, }; }); function func() { console.log("執(zhí)行我"); } return <div>子組件</div>;});export default Parent;使用forwardRef拋出子組件的ref
這個(gè)方法其實(shí)更適合自定義HOC。但問(wèn)題是，withRouter、connect、Form.create等方法并不能拋出ref，假如Child本身就需要嵌套這些方法，那基本就不能混著用了。forwardRef本身也是用來(lái)拋出子元素，如input等原生元素的ref的，并不適合做組件ref拋出，因?yàn)榻M件的使用場(chǎng)景太復(fù)雜了。
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()} >父組件調(diào)用子組件的 focus</button> </div> )}export default App;父組件調(diào)子組件函數(shù)有兩種情況
子組件無(wú)HOC嵌套：推薦使用ref直接調(diào)用有HOC嵌套：推薦使用自定義props的方式以上就是React父組件怎么調(diào)用子組件的方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
關(guān)鍵詞： React.js
營(yíng)業(yè)執(zhí)照公示信息