javascript - 再構成からのブランチの使用

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
}

分岐のあるコンポーネントは次のようになります。

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

次を使用してコンポーネントをレンダリングしてみます。

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

結果のエラーは次のようになります。

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.