5

我正在重构一个无状态功能组件以使用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.
4

2 回答 2

12

branch返回一个HOC，它接受一个组件并返回一个组件，因此branch(...)是一个HOC并且branch(...)(...)是一个组件。

在您的情况下，因为Icon不是组件而是 HOC，所以 React 无法渲染它。要修复它，您可以SvgIcon从branch的参数中移出并将其应用于由 返回的 HOC branch(...)，例如：

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

我们将恒等函数 ( a => a) 应用于 的第三个参数branch。你可以认为identity函数也是一个HOC，它基本上只是返回它得到的组件，并没有做更多的事情。

因为这种模式使用的非常频繁，所以第三个参数branch默认为恒等函数。因此，我们可以省略它并使我们的代码更简单：

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

我为这些代码创建了一个 jsfiddle。你可以在这里试试。

于 2017-03-19T04:00:47.330 回答
-3

您也可以只使用 if 语句而不是分支。考虑到您在执行 if 语句时遇到了一些困难。

也许是时候重新考虑那个图书馆了？

于 2017-07-14T07:49:18.843 回答