迹忆客 专注技术分享

使用更详细的片段语法将 key 属性添加到 React 片段，例如 <React.Fragment key={key}>。

更冗长的语法实现了相同的结果——对元素列表进行分组，而不向 DOM 添加额外的节点。

import React from 'react';

const App = () => {
  const arr = ['Austria', 'Belgium', 'Canada'];

  return (
    <div>
      {arr.map((element, key) => {
        return (
          <React.Fragment key={key}>
            <h2>key: {key}</h2>
            <h2>element: {element}</h2>
            <hr />
          </React.Fragment>
        );
      })}
    </div>
  );
};

export default App;

我们对 React 片段使用了更详细的语法，以便能够向片段添加 key 属性。

当我们需要在不向 DOM 添加额外节点的情况下对子列表进行分组时，会使用片段。

如果我们对片段使用简写语法 <> </>，我们将无法将任何属性传递给片段。

我们还可以从 React 导入 Fragment 元素，而不必像 React.Fragment 一样访问它。

// 👇️ 仅导入 Fragment
import {Fragment} from 'react';

const App = () => {
  const arr = ['Austria', 'Belgium', 'Canada'];

  return (
    <div>
      {arr.map((element, key) => {
        return (
          <Fragment key={key}>
            <h2>key: {key}</h2>
            <h2>element: {element}</h2>
            <hr />
          </Fragment>
        );
      })}
    </div>
  );
};

export default App;

此代码示例实现了相同的结果，但我们没有导入 React 命名空间对象，而是只导入了 Fragment 元素。