Javascript ReactJS-有条件地呈现空白

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

因此，道具是这样的：

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

而

FontAwesomeIcon

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

在按钮的

render

-功能中，我会检查是否设置了图标。如果是这样的话，应该有一个图标和一个空白之间的孩子和图标

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

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

render（）：JSX.Element{
让{children，leftIcon，righicon}=this.props；
返回(
{leftIcon&&}
{leftIcon&&'}
{儿童}
{rightIcon&&'}
{右图标&&}
);
}

虽然这个解决方案是可行的，但我想知道是否有比必须检查两次图标设置更简单的方法。此外，我希望能够使用

而不是

。 有没有办法避开空白，这样我就可以编写类似于

{leftIcon&&}

我尝试了

{leftIcon&&{nsbp；“}}

或

{leftIcon&&{nsbp；}}}

，这导致

TS1005:“}”应为空

---

本文建议，

应该适用于有意的空白

鉴于您应该能够插入与其他HTML内联的

，我原以为您不需要将其括在括号或字符串中。想象一下，就像编写

一样，您应该能够将其粘贴到

组件的末尾

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

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

---

免责声明，也未经测试

为什么不为this@JigarShah您介意添加一个关于如何准确使用样式的示例吗？当然，我会尝试。你能不能创建一个示例？第一个给我两个错误<代码>TS2362:算术运算的左侧必须是类型“any”、“number”或enum和

TS2304:找不到名称“nbsp”。

应为第二个

TS1005:“}”。那么这可能与
TypeScript
更相关？有趣的是，可能没有
{}
，但有
“
（我只是猜测我恐怕无法测试atm）
render(): JSX.Element {
  let { children, leftIcon, rightIcon } = this.props;

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