반응형
여러 HOC 래퍼를 사용하여 React 컴포넌트를 내보내시겠습니까?
스타일 텍스트를 표시하는 React 컴포넌트가 있는데 네트워크 리소스를 로드하고 WebSocket 입력을 수신하며 알림을 표시하도록 하고 싶습니다.이를 위해 다음 각 항목에 대해 상위 컴포넌트 래퍼 함수를 작성합니다.withResource
,withSocket
,그리고.withNotifications
.
컴포넌트를 수출할 때 이것이 맞습니까?
class TextComponent extends React.Component {
...
}
export default withResource(withSocket(withNotifications(TextComponent)))
사용할 수 있습니다.compose
redex 또는 recompose를 사용합니다.예를 들어 다음과 같습니다.
리덕스
import { compose } from 'redux'
export default compose(
withResource,
withSocket,
withNotifications
)(TextComponent)
재구성
import { compose } from 'recompose'
export default compose(
withResource,
withSocket,
withNotifications
)(TextComponent)
이것은 함수 구성이라고 불리며 수학적 배경(y와 x 변수의 명명 및 함수 역실행의 원인이 된다)을 가지고 있습니다.변수의 추가 정의와 심층적인 함수 래핑 수준을 제거하여 기술 함수 호출 방식의 복잡성을 줄입니다.
직접 작성하거나 라이브러리에서 다음과 같이 사용할 수 있습니다.lodash
,rambda
,redux
,기타.
const compose = (...rest) => x => rest.reduceRight((y, f) => f(y), x)
퍼스트 클래스 기능에서의 사용:
const increment = (numb) => numb + 1
const multiplyBy = (multiplyNum) => (num) => multiplyNum * num
compose(increment, multiplyBy(3), increment)(4)// 4 > 5 > 15 > 16
고차 컴포넌트에서의 사용:
compose(withRouter, withItems, withRefs)(Component)
또 다른 간단한 해결책은 다음과 같이 HOC 컴포넌트를 서로 겹쳐 놓는 것만으로 이를 3단계로 수행할 수 있습니다.
const firstHOC = withNotifications(TextComponent);
const secondHOC = withSocket(firstHOC);
export default withResource(secondHOC);
언급URL : https://stackoverflow.com/questions/48569635/exporting-react-component-with-multiple-hoc-wrappers
반응형
'programing' 카테고리의 다른 글
스프링 부트(JPA 포함): @Entity를 다른 패키지로 이동 (0) | 2023.03.14 |
---|---|
JSON 문자열에서 반환된 Objective-C의 null 값 확인 (0) | 2023.03.14 |
JSON 키 이름 변경 방법 (0) | 2023.03.14 |
오브젝트가 Python에서 JSON serializable인지 쉽게 확인할 수 있는 방법이 있나요? (0) | 2023.03.14 |
각도 구성 요소 외부의 클릭 감지 (0) | 2023.03.14 |