如何将关键道具添加到 React 片段

作者

向 React Fragment 添加一个关键道具

How to add a key prop to a React Fragment

使用更详细的片段语法将关键道具添加到 React 片段，例如<React.Fragment key={key}>. 更冗长的语法实现了相同的结果——对元素列表进行分组，而不向 DOM 添加额外的节点。

应用程序.js
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 添加额外节点的情况下对子列表进行分组时，会使用片段。

如果您使用 fragments 的速记语法<> </>，您将无法将任何道具传递给片段。

您还可以Fragment从 react 导入元素，而不必将其作为React.Fragment.

应用程序.ts
// 👇️ only import 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元素。

–

发表评论