gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 21:59:38 25 4
gpt4 key购买 nike

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

因此, 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>
);
}

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

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

TS1005: '}' expected.

最佳答案

本文建议&nbsp;应该适用于有意留白 http://andrewhfarmer.com/how-whitespace-works-in-jsx/

看到你应该能够插入 &nbsp;与其他 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com