React 상위 컴포넌트에서 하위 컴포넌트의 메소드를 호출하는 방법

호출 방법: 1. 클래스 구성 요소의 호출은 React.createRef(), ref의 함수 선언 또는 사용자 정의 onRef 속성을 사용하여 구현할 수 있습니다. 2. 함수 구성 요소 및 Hook 구성 요소의 호출은 useImperativeHandle 또는 forwardRef throw를 사용하여 구현할 수 있습니다. 이를 달성하려면 참조하세요.

이 튜토리얼의 운영 환경: Windows 7 시스템, React18 버전, Dell G3 컴퓨터.

React에서는 일반적으로 props 콜백을 사용하여 하위 구성 요소에 있는 상위 구성 요소의 메서드를 호출하는 경우가 많습니다. 그러나 때로는 높은 응집력을 달성하기 위해 상위 구성 요소에서 하위 구성 요소의 메서드를 호출해야 하는 경우도 있습니다. 방법은 다양하므로 필요에 따라 사용하세요.

클래스 구성 요소 내

---

1, React.createRef()

• 장점: 이해하기 쉽고, 참조 항목을 가리킵니다.

• 단점: 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

• 장점: 참조 작성이 간단함
• 단점: 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>)
	}
}

Function 구성 요소, Hook 구성 요소

---

1, useImperativeHandle

• 장점: 1. 작성방법이 간단하고 이해하기 쉽습니다. 2. 하위 구성 요소에 중첩된 HOC가 있는 경우 실제 하위 구성 요소를 가리킬 수도 있습니다
• 단점: 1. 소품 속성을 맞춤설정해야 합니다. 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(&#39;执行我&#39;);
  }
  return <div>子组件</div>;
});

export default Parent;

2.forwardRef

forwardRef를 사용하여 하위 컴포넌트의 참조를 던집니다.

이 방법은 실제로 HOC를 커스터마이징하는 데 더 적합합니다. 그러나 문제는 withRouter, connect, Form.create 및 기타 메소드가 ref를 던질 수 없다는 것입니다. Child 자체가 이러한 메소드를 중첩해야 하는 경우 기본적으로 함께 사용할 수 없습니다. 전달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

【관련 추천 : Redis 동영상 튜토리얼, 프로그래밍 교육】

위 내용은 React 상위 컴포넌트에서 하위 컴포넌트의 메소드를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!