使用React和Redux的模态窗口

Question

我用React和Redux做了一个模态窗口。我想避免本地状态，所以我使用Redux来保持信息是模态打开与否。

Modal.js

import React from 'react';
import './Modal.css';
import {useSelector, useDispatch} from 'react-redux';
import { isModalOpen } from '../actions/index';
const Modal = (props) => {
const dispatch = useDispatch();
const modalOpen = useSelector(state => state.isModalOpen);
const closeModal = () => {
dispatch(isModalOpen(false));
}
if(!modalOpen) return null;

return(
<div id="modal-container" onClick={closeModal}>
<div id="modal">
<span onClick={closeModal}>Close</span>
<h2>Modal</h2>
<p>description</p>
{props.children}
</div>
</div>
);
}
export default Modal;

App.js

import React from 'react';
import { useDispatch} from 'react-redux';
import Modal from './Modals/Modal';
import Contents1 from './Modals/Contents1';
import Contents2 from './Modals/Contents2';
import { isModalOpen } from './actions/index';
import './App.css';
const App =  () => {
const dispatch = useDispatch();
const openModal1 = () => {
dispatch(isModalOpen(true)); 
};
const openModal2 = () => {
dispatch(isModalOpen(true));
};
return (
<div>
<button onClick={openModal1}>Open Modal 1</button>     
<Modal>
<Contents1 />
</Modal>
<button onClick={openModal2}>Open Modal 2</button>
<Modal>
<Contents2 />
</Modal>
</div>
);
}
export default App;

当我有一个按钮打开一个模式一切都是好的。但是，如果我想用另一个按钮打开其他Contents2的模态窗口，它不起作用。

如何改变代码，使第一个按钮打开与Contents1的模态，第二个按钮打开与Contents2的模态?

非常感谢。

Answer 1

为什么要避免使用本地状态?由于两种模态都在组件内部使用，因此使用局部状态比将其存储在全局状态中更有意义。它还使代码更短，更清晰IMO。

const App =  () => {
const [currentModal, setCurrentModal] = useState(null);
return (
<div>
<button onClick={() => setCurrentModal('modal1')}>Open Modal 1</button>     
<button onClick={() => setCurrentModal('modal2')}>Open Modal 2</button>
{currentModal ? (
<Modal handleModalClose={() => setCurrentModal(null)}>
{currentModal === "modal1" ? <Contents1 /> : <Contents2 />}
</Modal>
)}
</div>
);
}
export default App;

然后modal.js文件也会被简化

const Modal = props => (
<div id="modal-container" onClick={props.handleModalClose}>
<div id="modal">
<span onClick={props.handleModalClose}>Close</span>
<h2>Modal</h2>
<p>description</p>
{props.children}
</div>
</div>
);
export default Modal;

如果你仍然想使用redux，你应该存储模态名称，而不仅仅是打开标志，并在模态名称和组件之间有一个映射

import modals from '../utils/modals'
const Modal = (props) => {
const dispatch = useDispatch();
const currentModal = useSelector(state => state.currentModal);
if(!currentModal) return null;

return(
<div id="modal-container" onClick={closeModal}>
<div id="modal">
<span onClick={closeModal}>Close</span>
<h2>Modal</h2>
<p>description</p>
{modals[currentModal}
</div>
</div>
);
}
export default Modal;

modals.js会输出一个像这样的对象

export default modals = {
modal1: <ModalContent1 />,
...
}

Answer 2

在您的Redux状态下，您需要通过一些唯一标识符来处理多个模态，否则您将告诉任何模态打开。然后传递"id";随着你的调度功能。