React JSX 中的 {" "} 是什么？答案

【问题标题】：What is {" "} in React JSX?React JSX 中的 {" "} 是什么？
【发布时间】：2020-05-12 13:35:53
【问题描述】：

React JSX 中的{" "} 是什么意思？我在下面的代码中看到它：

 <p><a href="/" className="mx-1">Home</a> {" "}| {" "} <a className="mx-1" href="/about-us">About 
 Us</a> {" "}|{" "}<a className="mx-1" href="/terms">Terms</a></p>

【问题讨论】：

{ } 是您将 JavaScript 表达式插入 JSX 的方式。 {" "} 只是插入一个空格字符。
是的，但是不需要插入一个简单的空格就足够了？

标签： reactjs jsx

【解决方案1】：

{} 用于在 JSX 中插入 JavaScript。

使用 {' '} 用于在 JSX 中插入一个空格，同时避免任何副作用。使用它插入空格不会在您的代码中插入任何 HTML 标记。

见：Best practice when adding whitespace in JSX

【讨论】：

【解决方案2】：

这是添加额外空格的方式之一。

【讨论】：

【解决方案3】：

当你想在你的 JSX 中添加 JavaScript 时，你需要使用{}

添加空格可以使用{' '}。但一般情况下，prettier 会将编辑器中的一些空格转换为{' '}。

【讨论】：