Question

我正在尝试在Button组件中对齐图标。传递 iconAlign 道具，如果它是正确的，图标将首先渲染，文本将在稍后显示，反之亦然。但我通过流程

得到了这个错误

React element `Icon`:  'object type'. See ./tmp/flow/flowlib_16523b66/react.js:159. This type cannot be coerced to 'string'.

这是我的组件

<ButtonInner>
  {
    iconAlign === 'right' ? `${text} ${icon && <Icon color={iconColor} />}` :
      `${icon && <Icon color={iconColor} />} ${text}`
  }
</ButtonInner>

我错过了什么吗？还有更好的选择吗？

Answer 1

我不应该使用字符串文字来渲染我的反应组件。我只是将它包装在 div 中并且有效

<ButtonInner>
  {
    iconAlign === 'right' ?
      <div>{text} {icon && <Icon color={iconColor} /></div> :
      <div>{icon && <Icon color={iconColor} />} {text}</div>
  }
</ButtonInner>

这篇文章帮助https://reactjs.org/docs/conditional-rendering.html

Answer 2

字符串文字最终将所有内容转换为字符串。组件的toString由react跟踪，并在组件上调用toString时抛出错误。您可以按如下方式编写代码以实现相同的目的：

iconAlign === 'right' ? (
  <Fragment> `${text} ` icon && <Icon color={iconColor} /> </Fragment>) : (
  <Fragment> icon && <Icon color={iconColor} /> {` ${text}`} </Fragment>
)

如果你正在使用react 16.2，你可以用Fragment来包装孩子。您当然可以去老学校并添加div，但会在生成的html中生成大量非语义div。

有关此Fragments的更多信息：https://reactjs.org/docs/fragments.html

React元素类型不能强制为'string'

2 个答案: