javascript - ReactJS - 有条件地渲染空白

Question

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

因此， Prop 是这样的:

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>
    );
}

虽然这个解决方案有效，但我想知道是否有比必须检查两次以设置图标更简单的方法。我也想有能力使用  而不是 . 有没有什么办法可以转义空格，这样我就可以写出类似 {leftIcon && <FontAwesome icon={leftIcon} />&nbsp;} 的东西？

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

TS1005: '}' expected.

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>
  );
}

免责声明，同样未经测试