클래스 기반 컴포넌트에서 React.forwardRef를 사용하는 방법은 무엇입니까?

React.forwardRef를 사용하려고하는데 HOC가 아닌 클래스 기반 구성 요소에서 작동하도록하는 방법에 대해 설명합니다.

문서 예제는 요소와 기능적 구성 요소를 사용하며 심지어 고차 구성 요소의 함수로 클래스를 래핑합니다.

그래서, 같은 것을 시작으로 이 자신의 ref.js파일을

const TextInput = React.forwardRef(
    (props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />)
);

대신 다음과 같이 정의합니다.

class TextInput extends React.Component {
  render() {
    let { props, ref } = React.forwardRef((props, ref) => ({ props, ref }));
    return <input type="text" placeholder="Hello World" ref={ref} />;
  }
}

또는

class TextInput extends React.Component {
  render() { 
    return (
      React.forwardRef((props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />))
    );
  }
}

만 작동 : /

또한, 알아요, 심판은 반응 방식이 아닙니다. 타사 캔버스 라이브러리를 사용하려고하는데 일부 도구를 별도의 구성 요소에 추가하고 싶으므로 이벤트 리스너가 필요하므로 수명주기 메서드가 필요합니다. 나중에 다른 경로로 갈 수 있지만 이것을 시도하고 싶습니다.

문서는 가능하다고 말합니다!

참조 전달은 DOM 구성 요소로 제한되지 않습니다. 참조를 클래스 구성 요소 인스턴스로 전달할 수도 있습니다.

이 섹션 의 메모에서.

그러나 그들은 단지 수업 대신에 HOC를 사용합니다.

에 대해 항상 동일한 prop을 사용한다는 아이디어 ref는 도우미로 클래스 내보내기를 프록시하여 얻을 수 있습니다.

class ElemComponent extends Component {
  render() {
    return (
      <div ref={this.props.innerRef}>
        Div has ref
      </div>
    )
  }
}

export default React.forwardRef((props, ref) => <ElemComponent 
  innerRef={ref} {...props}
/>);

그래서 기본적으로 우리는 ref를 전달하기 위해 다른 prop을 가져야하지만 허브 아래에서 할 수 있습니다. 대중이 일반 심판으로 사용하는 것이 중요합니다.

class BeautifulInput extends React.Component {
  const { innerRef, ...props } = this.props;
  render() (
    return (
      <div style={{backgroundColor: "blue"}}>
        <input ref={innerRef} {...props} />
      </div>
    )
  )
}

const BeautifulInputForwardingRef = React.forwardRef((props, ref) => (
  <BeautifulInput {...props} innerRef={ref}/>
));

const App = () => (
  <BeautifulInputForwardingRef ref={ref => ref && ref.focus()} />
)

ref를 클래스로 전달하려면 다른 prop 이름을 사용해야합니다. innerRef많은 라이브러리에서 일반적으로 사용됩니다.

기본적으로 이것은 단지 HOC 함수입니다. 클래스와 함께 사용하고 싶다면 혼자서 할 수 있고 일반 소품을 사용할 수 있습니다.

class TextInput extends React.Component {
    render() {
        <input ref={this.props.forwardRef} />
    }
}

const ref = React.createRef();
<TextInput forwardRef={ref} />

이 패턴은 예를 들어에서 사용되며 거기 styled-components에서 호출 innerRef됩니다.

다음과 같은 경우 고차 구성 요소로 수행 할 수 있습니다.

import React, { forwardRef } from 'react'

const withForwardedRef = Comp => {
  const handle = (props, ref) =>
    <Comp {...props} forwardedRef={ref} />

  const name = Comp.displayName || Comp.name
  handle.displayName = `withForwardedRef(${name})`

  return forwardRef(handle)
}

export default withForwardedRef

그런 다음 구성 요소 파일에서 :

class Boop extends React.Component {
  render() {
    const { forwardedRef } = this.props

    return (
      <div ref={forwardedRef} />
    )
  }
}

export default withForwardedRef(Boop)

나는 테스트를 통해 사전 작업을 수행했으며 이에 대한 패키지를 게시했습니다 react-with-forwarded-ref. https://www.npmjs.com/package/react-with-forwarded-ref

여러 다른 구성 요소에서이를 재사용해야하는 경우이 기능을 다음과 같이 내보낼 수 있습니다. withForwardingRef

const withForwardingRef = <Props extends {[_: string]: any}>(BaseComponent: React.ReactType<Props>) =>
    React.forwardRef((props, ref) => <BaseComponent {...props} forwardedRef={ref} />);

export default withForwardingRef;

용법:

const Comp = ({forwardedRef}) => (
 <input ref={forwardedRef} />
)
const EnhanceComponent = withForwardingRef<Props>(Comp);  // Now Comp has a prop called forwardedRef