React父組件如何調用子組件

本篇內容介紹了“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'

@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;

“React父組件如何調用子組件”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！