使用.map()方法创建多个div元素时,可以通过以下步骤打开一个而不是所有的div:
下面是一个示例代码:
import React, { useState } from 'react';
const DivList = () => {
const divArray = ['div1', 'div2', 'div3']; // 假设已经使用.map()方法创建了多个div元素
const [openDiv, setOpenDiv] = useState(null); // 用于存储需要打开的div元素的状态变量
const handleClick = (divId) => {
setOpenDiv(divId); // 更新需要打开的div元素的状态为true
};
return (
<div>
{divArray.map((divId) => (
<div
key={divId}
id={divId}
style={{ display: openDiv === divId ? 'block' : 'none' }} // 根据isOpen状态来决定是否渲染该div元素
>
{/* div内容 */}
<button onClick={() => handleClick(divId)}>打开</button> {/* 点击按钮触发打开事件 */}
</div>
))}
</div>
);
};
export default DivList;
在上述示例中,通过点击按钮触发handleClick函数来更新需要打开的div元素的状态为true,从而实现只打开一个而不是所有使用.map()创建的div元素。
领取专属 10元无门槛券
手把手带您无忧上云