[英]ReactJS - render conditionally whitespace
I'm trying to build a button-component which is able to have icons set before and after the element's children. 我正在尝试构建一个按钮组件,该组件能够在元素的子代之前和之后设置图标。
Therefore, the props are like this: 因此,道具是这样的:
export interface IButtonProps {
children?: React.ReactNode;
leftIcon?: FontAwesomeIcon;
rightIcon?: FontAwesomeIcon;
}
whereas FontAwesomeIcon
is an enum holding the available icons. 而FontAwesomeIcon
是一个包含可用图标的枚举。
In the button's render
-function I do check if there is an icon set. 在按钮的render
-function中,我检查是否有图标集。 If so, there should be the icon and a whitespace between the children and the icon. 如果是这样,应该在子图标和图标之间有一个图标和空白。
render(): JSX.Element {
let { children, leftIcon, rightIcon } = this.props;
return (
<button>
{leftIcon && <FontAwesome icon={leftIcon} />}
{leftIcon && " "}
{children}
{rightIcon && " "}
{rightIcon && <FontAwesome icon={rightIcon} />}
</button>
);
}
Though this solution is working I wonder if there is an easier way than having to check twice for an icon to be set. 尽管此解决方案有效,但我想知道是否有比简单检查两次设置图标更简单的方法。 Also I would like to have the ability to use
我也想拥有使用
的能力 instead of 代替 . 。 Is there any way to escape the whitespace so I can write something like
{leftIcon && <FontAwesome icon={leftIcon} /> }
? 有什么办法可以逃脱空白,所以我可以写类似{leftIcon && <FontAwesome icon={leftIcon} /> }
吗?
I tried {leftIcon && <FontAwesome icon={leftIcon} />{"&nsbp;"}}
or {leftIcon && <FontAwesome icon={leftIcon} />{&nsbp;}}
which leads to 我尝试了{leftIcon && <FontAwesome icon={leftIcon} />{"&nsbp;"}}
或{leftIcon && <FontAwesome icon={leftIcon} />{&nsbp;}}
导致
TS1005: '}' expected. TS1005:“}”。
This article suggests that
本文建议
should work for intentional whitespace http://andrewhfarmer.com/how-whitespace-works-in-jsx/ 应该适用于故意的空白http://andrewhfarmer.com/how-whitespace-works-in-jsx/
Seeing as you should be able to insert
看来您应该可以插入
inline with other HTML I would have thought you don't need to wrap it up in brackets or a string. 与其他HTML内联,我以为您不需要将其包装在方括号或字符串中。 Imagine it just like writing <br />
and you should be able to glue it to the end of the <FontAwesome />
component. 想象一下,就像编写<br />
,您应该可以将其粘贴到<FontAwesome />
组件的末尾。
render(): JSX.Element {
let { children, leftIcon, rightIcon } = this.props;
return (
<button>
{leftIcon && <FontAwesome icon={leftIcon} /> }
{children}
{rightIcon && <FontAwesome icon={rightIcon} />}
</button>
);
}
Disclaimer, this is untested 免责声明,这是未经测试的
As an alternative, this github issue https://github.com/facebook/react/issues/1643 suggests you can add {' '}
for intentional whitespace, so I'd have thought this would work too: 作为替代方案,此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>
);
}
Disclaimer, also untested 免责声明,也未经测试
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.