使用ブランチは

Question

再構成

から私はステートレスな機能コンポーネントがrecomposeからbranchとrenderComponentを使用するようにリファクタリングしています。

元のコンポーネントは、次のようになります。

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は、コンポーネントを受け入れてコンポーネントを返すHOCを返します。したがって、branch(...)はHOCであり、branch(...)(...)はコンポーネントです。あなたのケースでは

、Iconは、コンポーネントが、HOCではないので、それをレンダリングすることはできません反応するため。それを修正するには、branchの引数から出SvgIconを移動し、branch(...)によって返されたHOCにそれを適用することができ、例：

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

我々はbranchの第三引数に恒等関数（a => a）を適用します。アイデンティティ関数は基本的にちょうど取得するコンポーネントを返すHOCであると考えることができ、それ以上のことはしません。

このパターンは非常に頻繁に使用されているので、branchの3番目の引数は恒等関数にデフォルトされているため。その結果、我々はそれを省略し、我々のコードを簡単にすることができます。

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

私はこれらのコードのjsfiddleを作成しました。あなたはそれを試すことができますhere。

Answer 2

また、だけではなく、ブランチのif文を使用することができます。 if文がやっていることをやるのにいくつかの困難があったと考えてください。

たぶん時間は、そのライブラリを再検討するには？