使用来自重构的分支

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 return是一个HOC，接受一个组件，return一个组件，所以branch(...)是一个HOC，branch(...)(...)是一个组件。

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

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

我们将身份函数 (a => a) 应用于 branch 的第三个参数。你可以认为 identity 函数也是一个 HOC，它基本上只是 return 它获取的组件，什么都不做。

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

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

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

Answer 2

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

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

使用来自重构的分支

Using branch from recompose

javascript

reactjs

recompose