空白字符陷阱

让我们谈谈 JSX 中最常见的一个“陷阱”。

这是一个快速的示例：

import { createRoot } from 'react-dom/client';

const daysUntilSantaReturns = 123;

const element = (
  <div>
    <strong>
      Days until Santa returns:
    </strong>
    {daysUntilSantaReturns}
  </div>
);

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element);

请注意粗体文本和数字之间没有空格.不是 returns: 123 ，它显示为： returns:123 。

要理解为什么会发生这种情况，我们来考虑一下这个 JSX 如何编译成 JavaScript：

const element = React.createElement(
  "div",
  {},
  React.createElement("strong", {}, "Days until Santa returns:"),
  daysUntilSantaReturns,
);

我们的 <div> 有两个子元素，即 <strong> 标签和 daysUntilSantaReturns 变量。

记住，JSX 不会编译为 HTML，它会编译为 JavaScript。当执行该 JavaScript 时，它只会创建并附加两个 HTML 节点：

• 一个 <strong> 标签带有一些文本。
• 一个文本节点，用于数字 123 。

那我们该如何修复呢？最常见的解决方案是在花括号中添加一个单个空格字符：

div>
  <strong>Days until Santa returns:</strong>
  {' '}
  {daysUntilSantaReturns}
</div>

这是它编译的方式：

const element = React.createElement(
  "div",
  {},
  React.createElement("strong", {}, "Days until Santa returns:"),
  " ",
  daysUntilSantaReturns,
);

我承认，当我第一次学到这个技巧时，我觉得它真的很 hacky。我希望 React 团队能修复这个 bug，并使其像 HTML 一样处理空白。

我已意识到，这种行为实际上更像是一种特性，而不是一个错误。

让我们谈谈这个。

这是视频中的 3 张图片游乐场：

<style>
  img {
    height: 75px;
    border: 1px solid;
  }
</style>

<div>
  <img
    alt=""
    src="https://sandpack-bundler.vercel.app/img/architecture-christian-perner.jpg"
  />
  <img
    alt=""
    src="https://sandpack-bundler.vercel.app/img/architecture-grant-lemons.jpg"
  />
  <img
    alt=""
    src="https://sandpack-bundler.vercel.app/img/architecture-hugo-sousa.jpg"
  />
</div>