ReactJS - 条件渲染空格

Question

ReactJS - 条件渲染空格

javascriptreactjstypescripthtml-entities

3

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

因此，属性如下：

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} /> }这样的内容？

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

TS1005：需要“}”。

- KingKerosin

1

为什么你不给这个加上样式呢？ - Jigar Shah

@JigarShah，您能否举个例子说明您如何精确使用样式？ - KingKerosin

好的，我会尝试。请问您可以创建零食演示吗？ - Jigar Shah

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

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

免责声明，也未经测试