클래스 기반 컴포넌트에서 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
됩니다.
This can be accomplished with a higher-order component, if you like:
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
And then in your component file:
class Boop extends React.Component {
render() {
const { forwardedRef } = this.props
return (
<div ref={forwardedRef} />
)
}
}
export default withForwardedRef(Boop)
I did the work upfront with tests & published a package for this, react-with-forwarded-ref
: https://www.npmjs.com/package/react-with-forwarded-ref
Incase you need to reuse this in many difference components, you can export this ability to something like withForwardingRef
const withForwardingRef = <Props extends {[_: string]: any}>(BaseComponent: React.ReactType<Props>) =>
React.forwardRef((props, ref) => <BaseComponent {...props} forwardedRef={ref} />);
export default withForwardingRef;
usage:
const Comp = ({forwardedRef}) => (
<input ref={forwardedRef} />
)
const EnhanceComponent = withForwardingRef<Props>(Comp); // Now Comp has a prop called forwardedRef
참고URL : https://stackoverflow.com/questions/51526461/how-to-use-react-forwardref-in-a-class-based-component
'programing tip' 카테고리의 다른 글
기존 열의 값과 동일한 기본값을 사용하여 테이블에 열 추가 (0) | 2020.10.15 |
---|---|
clone () 대 복사 생성자 대 팩토리 메서드? (0) | 2020.10.15 |
C #에서 F # 코드 호출 (0) | 2020.10.15 |
API 키와 암호를 사용하는 이유는 무엇입니까? (0) | 2020.10.15 |
64 비트 프로그램이 32 비트 버전보다 크고 빠릅니까? (0) | 2020.10.15 |