使用分支來重構

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不是組件而是HOC，因此React無法呈現它。 要修復它，你可以從branch的參數中移出SvgIcon並將其應用於branch(...)返回的HOC，例如：

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

我們將一個標識函數（ a => a ）應用於branch的第三個參數。 您可以認為身份函數也是一個HOC，它基本上只返回它獲得的組件而不再做任何事情。

因為這種模式經常使用，所以branch的第三個參數默認為identity函數。 因此，我們可以省略它並使我們的代碼更簡單：

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

我為這些代碼創建了一個jsfiddle。 你可以在這里試試。

Answer 2

您也可以使用if語句而不是分支。 考慮到你在做一個if語句時遇到了一些困難。

也許是時候重新考慮那個圖書館？