My App

片段

片段

假设我们想要以以下 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;

错误消息告诉我们使用“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;

在这个例子中,列表项应该在单行中显示,但 <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;

如果在我们的开发者工具中检查输出,我们会看到我们的两个 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