ReactJS - 有条件地渲染空白

Question

我正在尝试构建一个按钮组件，它能够在元素的子元素之前和之后设置图标。

因此，道具是这样的：

export interface IButtonProps {
    children?: React.ReactNode;
    leftIcon?: FontAwesomeIcon;
    rightIcon?: FontAwesomeIcon;
}

而FontAwesomeIcon 是一个包含可用图标的枚举。

在按钮的render-function 中，我会检查是否有图标集。如果是这样，应该有图标和孩子和图标之间的空白。

render(): JSX.Element {
    let { children, leftIcon, rightIcon } = this.props;

    return (
        <button>
            {leftIcon && <FontAwesome icon={leftIcon} />}
            {leftIcon && " "}
            {children}
            {rightIcon && " "}
            {rightIcon && <FontAwesome icon={rightIcon} />}
        </button>
    );
}

虽然这个解决方案有效，但我想知道是否有比检查两次设置图标更简单的方法。我也希望能够使用  而不是。 有什么办法可以逃避空白，这样我就可以写{leftIcon && <FontAwesome icon={leftIcon} /> }之类的东西了？

我尝试了{leftIcon && <FontAwesome icon={leftIcon} />{"&nsbp;"}} 或{leftIcon && <FontAwesome icon={leftIcon} />{&nsbp;}} 导致

TS1005：应为“}”。

Answer 1

这篇文章建议  应该适用于有意的空白http://andrewhfarmer.com/how-whitespace-works-in-jsx/

看到您应该能够将  与其他 HTML 内联插入，我原以为您不需要将其包裹在括号或字符串中。想象一下，就像写 <br /> 一样，您应该可以将它粘贴到 <FontAwesome /> 组件的末尾。

render(): JSX.Element {
  let { children, leftIcon, rightIcon } = this.props;

  return (
    <button>
        {leftIcon && <FontAwesome icon={leftIcon} />&nbsp;}
        {children}
        {rightIcon && &nbsp;<FontAwesome icon={rightIcon} />}
    </button>
  );
}

免责声明，这是未经测试的

作为替代方案，这个 github 问题 https://github.com/facebook/react/issues/1643 建议您可以添加 {' '} 用于有意的空白，所以我认为这也可以：

render(): JSX.Element {
  let { children, leftIcon, rightIcon } = this.props;

  return (
    <button>
        {leftIcon && <FontAwesome icon={leftIcon} />{' '}}
        {children}
        {rightIcon && {' '}<FontAwesome icon={rightIcon} />}
    </button>
  );
}

免责声明，也未经测试