我对 React 相当陌生，我正在使用 NextJS。我有一个包含角色对象的数组。我正在映射数组以显示角色名称和描述。我想做的是当用户单击角色图标时显示其他数组对象属性。第一个地图功能能够在页面上显示每个角色和描述。但是，当我单击角色图标时，模式上的地图功能会立即显示所有其他对象属性。有没有办法让每次图标单击都显示该对象的特定角色属性？
这是数组的示例：
const roles = [
{
id: 1,
name: 'First Role',
description: 'ipsum description',
responsibilities: 'ipsum responsibilities',
requirements: "ipsum requirement",
},
{
id: 2,
name: 'Fourth Role',
description: 'ipsum description',
responsibilities: 'ipsum responsibilities',
requirements: "ipsum requirement",
},
{
id: 3,
name: 'Third Role',
description: 'ipsum description',
responsibilities: 'ipsum responsibilities',
requirements: "ipsum requirement",
},
这是当前的页面布局：
export default function Careers() {
const { isOpen, toggle } = useModal()
return (
<>
<Head>
<title>Careers</title>
<meta name='description' content='Careers' />
</Head>
<HeroGeneric heading='Careers' message="" />
<div className=" py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:text-center">
<h2 className="text-base font-semibold leading-7 text-indigo-600">Open Roles</h2>
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
How you can make a difference
</p>
<p className="mt-6 text-lg leading-8 text-gray-600">
Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum
pulvinar et feugiat blandit at. In mi viverra elit nunc.
</p>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
{roles.map((role) => (
<div key={role.id} className=" glass relative pl-16">
<dt className="text-base m-2 font-semibold leading-7 text-gray-900">
<div className="absolute left-0 top-0 ml-2 mt-2 flex h-10 w-10 items-center justify-center rounded-lg bg-taublue">
<span isOpen={isOpen} onClick={toggle}>
<Image
src={roleIcon}
className="h-6 w-6 text-white"
alt={role.id}
height={"24"} width={"24"}
/>
</span>
</div>
{role.name}
</dt>
<dd className="mt-2 mr-2 mb-2 text-base leading-7 text-gray-600">{role.description}</dd>
</div>
))}
</dl>
</div>
</div>
<TestModal
isOpen={isOpen}
toggle={toggle}
>
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
{roles.map((role) => (
<div key={role.id} className=" glass relative pl-16">
<dt className="text-base m-2 font-semibold leading-7 text-gray-900">
{role.name}
</dt>
<dd className="mt-2 mr-2 mb-2 text-base leading-7 text-gray-600">{role.responsibilities}</dd>
<dd className="mt-2 mr-2 mb-2 text-base leading-7 text-gray-600">{role.requirements}</dd>
</div>
))}
</dl>
</TestModal>
</div>
</>
)
}
我正在将此组件用于我的模态：
import React, { ReactNode } from 'react';
interface ModalType {
children?: ReactNode;
isOpen: boolean;
toggle: () => void;
}
export default function Modal(props: ModalType) {
return (
<>
{props.isOpen && (
<div className='modal-overlay' onClick={props.toggle}>
<div onClick={(e) => e.stopPropagation()} className='modal-box'>
{props.children}
</div>
</div>
)}
</>
);
}
这是我必须打开模态的钩子：
export default function useModal() {
const [isOpen, setisOpen] = useState(false);
const toggle = () => {
setisOpen(!isOpen);
};
return {
isOpen,
toggle
};
}
当我单击特定角色图标时，模式应显示该角色的要求和职责。但是，它当前显示所有对象属性。我试图针对特定的角色属性，但我不知道如何做到这一点。 我是一名新的网络开发人员，希望得到任何帮助！
您可以创建一个状态来保存角色ID并在模态中显示该角色。
示例：
export default function Careers() {
const { isOpen, toggle } = useModal()
const [roleId, setRoleId } = useState('')
const handleClick = (roleId) => {
setRoleId(roleId)
toggle()
}
return (
<>
<Head>
<title>Careers</title>
<meta name='description' content='Careers' />
</Head>
<HeroGeneric heading='Careers' message="" />
<div className=" py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:text-center">
<h2 className="text-base font-semibold leading-7 text-indigo-600">Open Roles</h2>
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
How you can make a difference
</p>
<p className="mt-6 text-lg leading-8 text-gray-600">
Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum
pulvinar et feugiat blandit at. In mi viverra elit nunc.
</p>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
{roles.map((role) => (
<div key={role.id} className=" glass relative pl-16">
<dt className="text-base m-2 font-semibold leading-7 text-gray-900">
<div className="absolute left-0 top-0 ml-2 mt-2 flex h-10 w-10 items-center justify-center rounded-lg bg-taublue">
<span isOpen={isOpen} onClick={() => handleClick(role.id)}>
<Image
src={roleIcon}
className="h-6 w-6 text-white"
alt={role.id}
height={"24"} width={"24"}
/>
</span>
</div>
{role.name}
</dt>
<dd className="mt-2 mr-2 mb-2 text-base leading-7 text-gray-600">{role.description}</dd>
</div>
))}
</dl>
</div>
</div>
<TestModal
isOpen={isOpen}
toggle={toggle}
>
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
<div className=" glass relative pl-16">
<dt className="text-base m-2 font-semibold leading-7 text-gray-900">
{roles[roleId].name}
</dt>
<dd className="mt-2 mr-2 mb-2 text-base leading-7 text-gray-600">{roles[roleId].responsibilities}</dd>
<dd className="mt-2 mr-2 mb-2 text-base leading-7 text-gray-600">{roles[roleId].requirements}</dd>
</div>
</dl>
</TestModal>
</div>
</>
)}