React.js中JSX代码里<button>后跟随的{" "}的作用是什么？

你代码里的{" "}是JSX语法中强制插入普通空格文本节点的标准写法，具体工作逻辑如下：

• 首先对应JSX的空白字符压缩规则：默认情况下，JSX会把标签之间的换行、连续的空格/制表符在渲染时合并为单个空格，标签首尾的空白甚至会被直接移除。如果你直接在两个button标签之间敲空格，代码换行后很可能出现空格丢失、元素挨在一起的情况，用{" "}就可以避免这个问题：花括号包裹的是JavaScript表达式，字符串" "会被作为纯文本节点原样渲染到页面，不会被空白压缩规则处理，保证按钮之间始终有1个空格的间距。
• 其次解释它为什么会和按钮一起隐藏：你这段{" "}和三个button节点同级，都写在rating为空时才渲染的条件分支（也就是三元表达式的else分支的React片段里）。当你点击按钮调用setRating给rating赋值后，条件判断rating ? ... : ...会走前半段逻辑，整个else分支下的所有节点（3个button + 1个空格文本节点）都会被React从DOM树中卸载，自然就跟着按钮一起消失了。

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