javascript - 更好的jsx条件以订购组件

我有一个图标位置 Prop ，可以决定将其放置在 child 的左侧还是右侧。我有这个工作

<List>
    {iconPosition === 'right' && (
        <Text />
    )}
    {icon && (
        <Icon />
    )}
    {iconPosition === 'left' && (
        <Text />
    )}
</List>

但是我认为它可以更简单，尽管我认为上面的代码是可读的。

最佳答案

您无法通过其他任何方式执行此操作。您使用的是各自的条件，但结果各不相同。

也许您可以将它们放在一行上以使其更具可读性。

<List>
    {iconPosition === 'right' && <Text />}
    {icon && <Icon />}
    {iconPosition === 'left' && <Text />}
</List>

要么

render() {
  const textLeft = (iconPosition === 'left');
  const textRight = (iconPosition === 'right');

  ...
}

并使用它。但这主要取决于您的喜好/您和您的同事正在使用的编码样式。