Question

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

因此，道具是这样的：

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：'}'预期。

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

免责声明，也未经测试

ReactJS - 有条件地渲染空格

1 个答案: