如何在JSX中添加额外空格？说明期望效果与当前呈现状态

没问题，我来帮你把JSX里加额外空格的需求、当前效果和期望效果都梳理清楚~

当前呈现效果及对应代码 #

假设你现在的JSX代码是类似这样的（常见的动态文本拼接场景）：

function UserCard({ username, role }) {
  return <span>{username}({role})</span>;
}

当传入username="johndoe"、role="admin"时，渲染出来的内容是：johndoe(admin)——可以看到用户名和左括号之间没有空格，整体排版显得很拥挤，不够美观。

期望实现的效果及修改后的代码 #

咱们要实现的是在两者之间加一个额外空格，让渲染结果变成：johndoe (admin)。有两种简单的实现方式：

方式1：在表达式之间直接插入空格文本 #

直接在JSX的表达式和固定文本之间加空格就行，代码修改成这样：

function UserCard({ username, role }) {
  return <span>{username} ({role})</span>;
}

这里就在{username}和(之间加了一个空格，JSX会保留这个明确的空格，渲染出符合预期的排版。

方式2：使用模板字符串拼接 #

如果是更复杂的文本组合，也可以用ES6模板字符串来处理，代码如下：

function UserCard({ username, role }) {
  return <span>{`${username} (${role})`}</span>;
}

这种方式同样能在用户名和角色之间添加一个空格，效果和第一种完全一致，适合需要拼接多个动态值的场景。

小提醒 #

JSX里会自动忽略纯文本中多余的换行、连续空格（会合并成一个），但像上面这样明确添加的单个空格或者模板字符串里的空格，都会被正常保留下来哦。

内容的提问来源于stack exchange，提问作者bgoldfarb