所以我有一个 js 文件，其中存储了所有数据，我将映射该 js 文件来渲染我想要渲染的数据。为了阻止我自己渲染所有数据，我做了这样的设置，每次 title = element.id 时它只会有条件地渲染，因此它应该只渲染具有标题的 id 特定 id 的数据。然而，虽然这有效，但它最终会渲染一堆空的 div，因此这会降低我的实际数据。 Image of my data being pushed down 正如您所看到的，空的 div 将我的实际数据在模态中推低了很多。
有人知道如何阻止这种情况发生吗？ (如何通过停止渲染空白 div 来消除上面的空间？)
我的模态文件如下所示
const Modal = ({ handleClose, id, title, subtitle, description, techStack, image, github, devpost }) => {
let isId = false;
return (
<Backdrop onClick={handleClose}>
<motion.div
onClick={(e) => e.stopPropagation()}
className='modal-ics'
variants={dropIn}
initial='hidden'
animate='visible'
exit='exit'
>
<div className='w-full flex flex-col items-center'>
<ModalButton onClick={handleClose} label='Close'></ModalButton>
<div className='flex flex-col w-full h-full justify-between items-start'>
hello
{ICSData.map((element) => {
if (id == element.id) {
isId = true;
}
else {
isId = false;
}
return (
<div>
{ isId &&
<div>
<div className='modal-text-separator'>
<h1 className='modal-title'>{element.title}</h1>
<h3 className='modal-date'>{element.subtitle1}</h3>
<p className='modal-description mt-2'>{element.description1}</p>
</div>
{ element.subtitle2 &&
<div className='modal-text-separator'>
<h3 className='modal-date'>{element.subtitle2}</h3>
<p className='modal-description mt-2'>{element.description2}</p>
</div>
}
{ element.subtitle3 &&
<div className='modal-text-separator'>
<h3 className='modal-date'>{element.subtitle3}</h3>
<p className='modal-description mt-2'>{element.description3}</p>
</div>
}
{ element.subtitle4 &&
<div className='modal-text-separator'>
<h3 className='modal-date'>{element.subtitle4}</h3>
<p className='modal-description mt-2'>{element.description4}</p>
</div>
}
{ element.subtitle5 &&
<div className='modal-text-separator'>
<h3 className='modal-date'>{element.subtitle5}</h3>
<p className='modal-description mt-2'>{element.description5}</p>
</div>
}
</div>
}
</div>
);
})}
</div>
</div>
</motion.div>
</Backdrop>
)
}
export default Modal;
我的数据文件如下所示
import React from 'react'
const ICSData = [
{
id: "classes",
title: "Classes",
image: "InspiritAI.png" ,
subtitle1: "very cool subtitle",
description1:
"this is a very cool description",
subtitle2: "very cool subtitle",
description2:
"this is a very cool description",
subtitle3: "very cool subtitle",
description3:
"this is a very cool description",
subtitle4: "very cool subtitle",
description4:
"this is a very cool description",
subtitle5: "very cool subtitle",
description5:
"this is a very cool description",
},
{
id: "documentation-ds",
title: "Documentation",
image: "InspiritAI.png" ,
subtitle1: "very cool subtitle",
description1:
"this is a very cool description",
subtitle2: "very cool subtitle",
description2:
"this is a very cool description",
subtitle3: "very cool subtitle",
description3:
"this is a very cool description",
subtitle4: "very cool subtitle",
description4:
"this is a very cool description",
subtitle5: "very cool subtitle",
description5:
"this is a very cool description",
},
{
id: "file-reading-and-writing",
title: "File Reading and Writing",
image: "InspiritAI.png" ,
subtitle1: "very cool subtitle",
description1:
"this is a very cool description",
subtitle2: "very cool subtitle",
description2:
"this is a very cool description",
subtitle3: "very cool subtitle",
description3:
"this is a very cool description",
subtitle4: "very cool subtitle",
description4:
"this is a very cool description",
subtitle5: "very cool subtitle",
description5:
"this is a very cool description",
},
{
id: "object-concepts",
title: "Object Concepts",
image: "InspiritAI.png" ,
subtitle1: "very cool subtitle",
description1:
"this is a very cool description",
subtitle2: "very cool subtitle",
description2:
"this is a very cool description",
subtitle3: "very cool subtitle",
description3:
"this is a very cool description",
subtitle4: "very cool subtitle",
description4:
"this is a very cool description",
subtitle5: "very cool subtitle",
description5:
"this is a very cool description",
},
{
id: "uml-diagrams",
title: "UML Diagrams",
image: "InspiritAI.png" ,
subtitle1: "very cool subtitle",
description1:
"this is a very cool description",
subtitle2: "very cool subtitle",
description2:
"this is a very cool description",
subtitle3: "very cool subtitle",
description3:
"this is a very cool description",
subtitle4: "very cool subtitle",
description4:
"this is a very cool description",
subtitle5: "very cool subtitle",
description5:
"this is a very cool description",
},
{
id: "documentation-algorithms",
title: "Documentation",
image: "InspiritAI.png" ,
subtitle1: "very cool subtitle",
description1:
"this is a very cool description",
subtitle2: "very cool subtitle",
description2:
"this is a very cool description",
subtitle3: "very cool subtitle",
description3:
"this is a very cool description",
subtitle4: "very cool subtitle",
description4:
"this is a very cool description",
subtitle5: "very cool subtitle",
description5:
"this is a very cool description",
}
]
export default ICSData;
最佳答案
最终出现多个不应该存在的空 div 的原因在于映射的返回语句:
{ICSData.map((element) => {
if (id == element.id) {
isId = true;
}
else {
isId = false;
}
return (
<div>
{ isId &&
<div>
<div className='modal-text-separator'>
...
}
</div>
)
...
在这里，无论是否应该存在，您仍然在创建一个 div。最简单的修复方法是如果您的 id 不匹配，则返回一个空元素，如下所示:
{ICSData.map(element => {
if (id == element.id) {
return (
<YOUR_CODE />
)
} else {
return <></>
}
}
但是，循环遍历所有数据以显示一个元素可能不是最好的主意。一些替代方案:
- 更改您的数据，使其不再是数组，而是对象的对象，键是条目的 ID，值是其余数据(假设所有 ID 都是唯一的)
- 使用查找功能(再次假设您的 ID 是唯一的)
我将讨论第二个解决方案，因为它不涉及更改数据并且更简单。但是，它比第一个解决方案慢，因为 .find 函数的复杂度为 O(n)，而第一个解决方案的复杂度为 O(1)。如果您的数据很少，这可能并不重要，但如果 ICSData 数组中的项目数量增加，则需要记住这一点。
您可以使用一行实现第二种解决方案:
const data = ICSData.find(element => id === element.id)
// Do whatever you want with this var in your component
关于javascript - 如何在映射时停止渲染每个数据文件的 react 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/75103052/