在useMemo的map遍历里面我设置个局部变量,然后通过它控制每个dom的展开还是收起,在a标签里让他取反, 那个dom就不会更新
时间: 2024-04-11 20:33:48 浏览: 99
你可以通过在 `useMemo` 的回调函数中创建一个局部变量,并在每个 DOM 元素的展开和收起之间进行切换。然后,将这个变量用作控制每个 DOM 元素展开或收起的判断条件。在 `<a>` 标签中取反这个变量,可以阻止特定的 DOM 元素更新。以下是一个示例代码:
```jsx
import React, { useMemo, useState } from 'react';
function Component() {
const [expandMap, setExpandMap] = useState({});
const data = useMemo(() => {
return [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
];
}, []);
const toggleExpand = (id) => {
setExpandMap((prevState) => ({
...prevState,
[id]: !prevState[id],
}));
};
return (
<div>
{data.map((item) => (
<div key={item.id}>
<a href="#" onClick={() => toggleExpand(item.id)}>
{expandMap[item.id] ? '收起' : '展开'}
</a>
{expandMap[item.id] && <div>{item.name}</div>}
</div>
))}
</div>
);
}
```
在上面的示例中,`expandMap` 是一个对象,用于存储每个元素的展开状态。`toggleExpand` 函数用于切换展开状态。在渲染时,根据 `expandMap` 的值来决定是否展示每个 DOM 元素。通过点击 `<a>` 标签,可以改变特定元素的展开状态,而不会影响其他元素的更新。
阅读全文