使用recompose中的分支

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
}

带有分支的组件如下所示：

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.

Answer 1

branch返回一个HOC，它接受一个组件并返回一个组件，所以branch(...)是一个HOC，而branch(...)(...)是一个组件。

在您的例子中，因为Icon不是一个组件，而是一个临时组件，所以React无法呈现它。要解决这个问题，可以将SvgIcon从branch的参数中移出，并将其应用于branch(...)返回的HOC，例如：

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

我们将一个标识函数(a => a)应用于branch的第三个参数。您可以认为identity函数也是一个HOC函数，它基本上只是返回它获得的组件，而不做任何其他事情。

由于此模式非常常用，因此branch的第三个参数默认为identity函数。因此，我们可以省略它，使我们的代码更简单：

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

我已经为这些代码创建了一个jsfiddle。你可以试试here。

Answer 2

您也可以只使用if语句而不是分支。假设您在执行if语句所做的工作时遇到了一些困难。

也许是时候重新考虑这个库了？