React :所有的Modal都会一次打开，当我在modal中传递道具时，只有最后一个会出现
React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，可以将界面拆分成独立的、可复用的组件，通过组件的组合和嵌套来构建复杂的用户界面。
在React中，Modal是一种常见的弹出窗口组件，用于在当前页面上展示额外的内容或交互。根据提供的问题描述，所有的Modal都会一次打开，这可能是由于Modal组件的使用方式不正确导致的。
当在Modal中传递道具（props）时，只有最后一个会出现，这可能是由于在循环中创建多个Modal组件时，没有正确地传递不同的道具值导致的。解决这个问题的方法是确保每个Modal组件都有独立的道具值，可以通过在循环中为每个Modal组件创建一个独立的道具对象来实现。
以下是一些可能导致问题的代码示例：
// 错误示例
const modals = [
{ id: 1, content: 'Modal 1' },
{ id: 2, content: 'Modal 2' },
{ id: 3, content: 'Modal 3' },
];
const App = () => {
const [showModal, setShowModal] = useState(false);
const handleOpenModal = () => {
setShowModal(true);
};
return (
<div>
{modals.map(modal => (
<Modal key={modal.id} show={showModal} content={modal.content} />
))}
<button onClick={handleOpenModal}>Open Modal</button>
</div>
);
};
const Modal = ({ show, content }) => {
return (
<div className={`modal ${show ? 'show' : ''}`}>
<div className="modal-content">{content}</div>
</div>
);
};在上述示例中，由于所有的Modal组件都使用了相同的show道具值，导致它们会同时显示或隐藏。而在循环中传递的content道具值是正确的，但由于Modal组件的显示状态相同，只有最后一个Modal组件的内容会显示出来。
为了解决这个问题，我们可以为每个Modal组件创建一个独立的显示状态和内容道具值。以下是修改后的示例代码：
// 正确示例
const modals = [
{ id: 1, content: 'Modal 1' },
{ id: 2, content: 'Modal 2' },
{ id: 3, content: 'Modal 3' },
];
const App = () => {
const [showModal, setShowModal] = useState({});
const handleOpenModal = (modalId) => {
setShowModal(prevState => ({
...prevState,
[modalId]: true,
}));
};
return (
<div>
{modals.map(modal => (
<Modal
key={modal.id}
show={showModal[modal.id]}
content={modal.content}
/>
))}
<button onClick={() => handleOpenModal(1)}>Open Modal 1</button>
<button onClick={() => handleOpenModal(2)}>Open Modal 2</button>
<button onClick={() => handleOpenModal(3)}>Open Modal 3</button>
</div>
);
};
const Modal = ({ show, content }) => {
return (
<div className={`modal ${show ? 'show' : ''}`}>
<div className="modal-content">{content}</div>
</div>
);
};在修改后的示例中，我们使用了一个对象来存储每个Modal组件的显示状态。showModal对象的键是Modal的id，值表示Modal是否显示。当点击打开Modal的按钮时，我们更新showModal对象中对应Modal的显示状态，从而实现只显示一个Modal的效果。
腾讯云提供了一些与React相关的产品和服务，例如云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。更多关于腾讯云产品的信息可以参考腾讯云官方网站：腾讯云。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
活动推荐
腾讯云开发者
