javascript - ReactJS-有条件地呈现空白

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

因此， Prop 是这样的:

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} />&nbsp;}的东西吗？

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

最佳答案

本文建议 应该适用于有意的空格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>
  );
}

免责声明，也未经测试

关于javascript - ReactJS-有条件地呈现空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46558311/