클래스 기반 컴포넌트에서 React.forwardRef를 사용하는 방법

클래스 기반 컴포넌트에서 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를 사용합니다.

항상 같은 소품을 사용하여ref는 도우미를 사용하여 클래스 내보내기를 프록시함으로써 실행할 수 있습니다.

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

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

따라서 기본적으로는 참조를 전달하기 위해 다른 소품을 사용해야 하지만 허브 아래에서 수행할 수 있습니다.일반인들이 그것을 일반 심판으로 사용하는 것이 중요하다.

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()} />
)

참조를 클래스로 전달하려면 다른 소품 이름을 사용해야 합니다. 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

아직 결합하는데 어려움을 겪고 있는 사람이 있다면React.forwardRef()리액트 리듀스와 같은 HOC를 사용하여connect()이렇게 작동하게 된 거죠

export default connect(mapStateToProps, mapDispatchToProps)(
  React.forwardRef((props, ref) => <MyComponent innerRef={ref} {...props} />)
);

언급URL : https://stackoverflow.com/questions/51526461/how-to-use-react-forwardref-in-a-class-based-component