reactjs

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를 사용합니다.

답변

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

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

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

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

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)

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