片段

假设我们想要以以下 HTML 结束：

<h1>Welcome to my homepage!</h1>
<p>Don't forget to sign the guestbook!</p>

将该 HTML 复制/粘贴到我们的 React 应用程序中，将其转换为 JSX。然而，我们最终遇到了一个错误:

import React from 'react';

function App() {
  return (
    <h1>Welcome to my homepage!</h1>
    <p>Don't forget to sign the guestbook!</p>
  );
}

export default App;

Open Sandbox

错误消息告诉我们使用“JSX 片段”，我们很快就会详细了解这个。但首先，让我们花一点时间思考一下。为什么会出现错误？

花几分钟时间来研究这个问题。你能弄清楚为什么这是无效的吗？

在尝试解决这个问题几分钟后，观看这个视频以获取解释：

所以，这就是为什么这段代码无效的原因。我们怎么修复它呢？

一种选择是将两个 React 元素包裹在一个 div 中：

return (
  <div>
    <h1>Welcome to my homepage!</h1>
    <p>Don't forget to sign the guestbook!</p>
  </div>
);

如果我们检查原始的 JS 代码，我们会看到我们不再返回多个表达式:

return (
  React.createElement(
    'div',
    {},
    React.createElement('h1', {}, 'Welcome…'),
    React.createElement('p', {}, "Don't forget…"),
  );
);

所以，这修复了语法错误，但并不理想。它使 DOM 充满了不必要的元素。这甚至可能导致可访问性和布局问题，例如这样：

import React from 'react';

function App() {
  return (
    <ul>
      <ListItems />
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  );
}

function ListItems() {
  return (
    <div>
      <li>Item 1</li>
      <li>Item 2</li>
    </div>
  );
}

export default App;

Open Sandbox

在这个例子中，列表项应该在单行中显示，但 <div> 会打破 Flexbox 算法。它还会产生无效的标记，这意味着它可能会给依赖辅助技术如屏幕阅读器的人造成问题。

幸运的是，还有更好的方法。我们可以使用片段。

片段是一个特殊的 React 组件，它不会生成 DOM 节点。它的样子是这样的：

import React from 'react';

function App() {
  return (
    <React.Fragment>
      <h1>Welcome to my homepage!</h1>
      <p>Don't forget to sign the guestbook!</p>
    </React.Fragment>
  );
}

export default App;

Open Sandbox

如果在我们的开发者工具中检查输出，我们会看到我们的两个 HTML 元素， <h1> 和 <p> ，直接位于容器元素（ <div id="root"> ）内部:

<body>
  <div id="root">
    <h1>Welcome to my homepage!</h1>
    <p>Don't forget to sign the guestbook!</p>
  </div>
</body>

速记

React 片段也可以使用以下语法创建：

return (
  <>
    <h1>Welcome to my homepage!</h1>
    <p>Don't forget to sign the guestbook!</p>
  </>
);

这种简写语法可能看起来有点神奇/奇怪，但我还挺喜欢的。它表明这是一个“空”的 HTML 标签。

JSX编译后的JavaScript如下

React.createElement(
  React.Fragment,
  {},
  /* Children here */
);

React 团队专门包含了这个特殊组件，使我们能够从组件中返回多个元素，而不会污染 DOM。这是一个很棒的工具！

片段

提示

视频摘要

速记

On this page