재구성 지점 사용

Question

branch 및 renderComponent을 recompose에서 사용하기 위해 무국적 기능 구성 요소를 리팩터링합니다.

원래의 구성 요소는 다음과 같습니다

const Icon = props => { 
    const { type, name } = props 
    let res 
    if (type === 'font') { 
    return (<FontIcon name={name} />) 
    } else if (type === 'svg') { 
    res = (<SvgIcon glyph={name} />) 
    } 

    return res 
} 

분기 구성 요소는 다음과 같습니다 결과

<Icon name='crosshairs' type='font' /> 

:

const isFont = props => { 
    const { type } = props 
    return type === 'font' 
} 

const FontIconHoC = renderComponent(FontIcon) 
const SvgIconHoC = renderComponent(SvgIcon) 

const Icon = branch(isFont, FontIconHoC, SvgIconHoC) 

Icon.propTypes = { 
    type: string, 
    name: string 
} 

export default Icon 

가 내가 사용하려고하고 구성 요소를 렌더링 오류는 다음과 같습니다.

invariant.js:44Uncaught Error: Icon(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. 

Answer 1

branch 16,그래서 branch(...)가 HOC이고 branch(...)(...)가 구성 요소, 구성 요소를 수용하고 구성 요소를 돌려 HOC를 반환합니다.

Icon은 구성 요소가 아니라 HOC이므로 React가 렌더링 할 수 없으므로 귀하의 경우입니다. 이 문제를 해결하려면, 당신은 전, branch의 인수으로부터 SvgIcon를 이동 branch(...)에 의해 반환되는 HOC에 적용 할 수 있습니다 :

const Icon = branch(
    isFont, 
    FontIconHoC, 
    a => a 
)(SvgIcon) 

우리는 branch의 세 번째 인수에 식별 기능 (a => a)를 적용합니다. 신원 기능을 HOC라고 생각할 수도 있습니다. HOC는 기본적으로 가져 오는 구성 요소를 반환하며 더 이상 아무것도 수행하지 않습니다.

이 패턴은 매우 자주 사용되므로 branch의 세 번째 인수는 ID 기능의 기본값입니다. 따라서 코드를 생략하고 코드를 더 간단하게 만들 수 있습니다.

const Icon = branch(
    isFont, 
    FontIconHoC 
)(SvgIcon) 

이 코드에는 jsfiddle을 만들었습니다. 당신은 그것을 시도 할 수 here.

Answer 2

또한 분기 대신 if 문을 사용할 수도 있습니다. if 문이하는 일을하는 데 어려움을 겪었다 고 생각해보십시오.

어쩌면 해당 라이브러리를 재고 할 시간이 있습니까?