首頁  >  文章  >  web前端  >  React父元件怎麼呼叫子元件的方法

React父元件怎麼呼叫子元件的方法

青灯夜游
青灯夜游原創
2022-12-27 19:01:4218968瀏覽

呼叫方法:1、類別元件中的呼叫可以利用React.createRef()、ref的函數式宣告或props自訂onRef屬性來實作;2、函式元件、Hook元件中的呼叫可以利用useImperativeHandle或forwardRef拋出子元件ref來實作。

React父元件怎麼呼叫子元件的方法

本教學操作環境: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 &#39;react&#39;;
import { observer } from &#39;mobx-react&#39;

@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 &#39;react&#39;;
import { observer } from &#39;mobx-react&#39;


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(&#39;执行我&#39;);
  }
  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 &#39;react&#39;;
import ReactDOM from &#39;react-dom&#39;;
import { observer } from &#39;mobx-react&#39;

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的方式

【相關推薦:Redis影片教學程式教學

以上是React父元件怎麼呼叫子元件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn