如何将 key 属性添加到 react 片段-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > web前端 > react >

vue react javascript angular css html

如何将 key 属性添加到 react 片段

作者：迹忆客最近更新：2023/03/18 浏览次数：

使用更详细的片段语法将 key 属性添加到 react 片段，例如。

更冗长的语法实现了相同的结果——对元素列表进行分组，而不向 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 元素。

上一篇：如何在 react 中删除事件监听器

下一篇：获取 react 中元素的类名

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

node.js 与 react js 的比较

发布时间：2023/03/27 浏览次数：173 分类：node.js

本文比较和对比了两种编程语言，node.js 和 react。react 和 node.js 都是开源 javascript 库的示例。这些库用于构建用户界面和服务器端应用程序。

在 typescript 中 react usestate 钩子类型

发布时间：2023/03/19 浏览次数：246 分类：

本教程演示了如何在 typescript 中使用 react usestate hook。

typescript 中的 react 事件类型

发布时间：2023/03/19 浏览次数：477 分类：

本教程演示了如何在 typescript 中为 react 事件添加类型支持。

在 react 中循环遍历对象数组

发布时间：2023/03/18 浏览次数：602 分类：react

在 react 中循环对象数组：使用 map() 方法迭代数组。我们传递给 map() 的函数会为数组中的每个元素调用。该方法返回一个新数组，其中包含传入函数的结果。 export default function app (

获取 react 中元素的类名

发布时间：2023/03/18 浏览次数：340 分类：react

在 react 中使用 event.target 获取元素的类名获取元素的类名：将元素上的 onclick 属性设置为事件处理函数。访问元素的类名作为 event.currenttarget.classname 。 export default function app () { cons

如何在 react 中删除事件监听器

发布时间：2023/03/15 浏览次数：592 分类：react

在 react 中删除事件监听器：在 useeffect 挂钩中添加事件侦听器。从 useeffect 挂钩返回一个函数。当组件卸载时，使用 removeeventlistener 方法移除事件监听器。 import {useref, useeffect} from r

发布时间：2023/03/15 浏览次数：261 分类：react

react 中在 map() 中使用条件：在数组上调用 map() 方法。使用 if 条件，如果条件满足则显式返回。否则返回不同的值或返回 null 以不呈现任何内容。 export default function app () { const arr =

发布时间：2023/03/15 浏览次数：267 分类：react

在 react 中调用多个 onclick 函数：在元素上设置 onclick 属性。在事件处理函数中调用其他函数。事件处理函数可以根据需要调用尽可能多的其他函数。 export default function app () { const s

在 react 中按类名查找所有元素

发布时间：2023/03/15 浏览次数：268 分类：react

在 react 中通过 classname 查找所有元素：使用 getelementsbyclassname 方法获取具有特定类的所有元素。将对该方法的调用放在 useeffect() 钩子中。 import {useeffect} from react ; const app = () = { useef

如何将 key 属性添加到 react 片段-ag捕鱼王app官网