使用React和Redux的模式化視窗

我用React和Redux做了一個模態視窗。我想避免本地狀態，所以我使用Redux來保持模態是否打開的資訊。

Modal.js

import React from 'react';
import './Modal.css'/span>;
import {useSelector, useDispatch}. from 'react-redux'/span>;
import { isModalOpen } from './actions/index';

const Modal = (props) => {
    const dispatch = useDispatch();
    const modalOpen = useSelector(state => state.isModalOpen) 。

    const closeModal = (/span>) => {
        dispatch(isModalOpen(false))。
    }
    if(!modalOpen) return null;
    
    return(
        < div id="modal-container" onClick={closeModal}>>
            <div id="modal">/span>
                <span onClick={closeModal}> 關閉</span> 
                <h2>Modal</h2> 
                <p>description</p>/span>
                {props.children}。
            </div> {props.children}
        </div>/span>
    );
}

export default Modal;

App.js

import React from 'react' /span>;
import { useDispatch}. from 'react-redux';
import Modal from './Modals/Modal'/span>;
import Contents1 from ' ./Modals/Contents1';
import Contents2 from ' ./Modals/Contents2';
import { isModalOpen } from './actions/index';

import './App.css';

const App = (/span>) => {

  const dispatch = useDispatch();

  const openModal1 = (/span>) => {
    dispatch(isModalOpen(true))。
  };

  const openModal2 = (/span>) => {
    dispatch(isModalOpen(true))。
  };

  return (
    <div> 
      <button onClick={openModal1}> 打開模態1</button>。    
      <Modal>/span>
        <Contents1 />>
      </Modal>/span>

      <button onClick={openModal2}> 打開模態2</button>。
      <Modal>/span>
        <Contents2 />>
      </Modal>/span>
    </div>
  );
}

export default App;

當我用一個按鈕打開一個模態時，一切都很好。但是，如果我想讓另一個按鈕打開帶有其他內容2的Modal視窗，就不能作業了。

如何改變代碼，使第一個按鈕打開帶有Contents1的Modal，而第二個按鈕打開帶有Contents2的Modal？

非常感謝你。

uj5u.com熱心網友回復：

在你的Redux狀態中，你需要通過一些唯一的識別符號來處理多個模態，否則你就是告訴任何模態都要打開。然后在你的調度函式中傳遞 "id"。

uj5u.com熱心網友回復：

為什么你要避免使用本地狀態呢？由于兩個模態都在該組件中使用，因此使用本地狀態比將其存盤在全域狀態中更有意義。這也使得代碼更短、更干凈，我認為。

const App = (/span>) => {
  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> )}</Modal> 
  );
}

export default App;

然后modal.js檔案也將被簡化

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

     export default Modal;

如果你仍然想使用redux，你應該存盤模態名稱，而不僅僅是開放標志，并且在模態名稱和組件之間有一個映射關系

import modals from ' ./utils/modals' /span>
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>
                <span onClick={closeModal}> 關閉</span> 
                <h2>Modal</h2> 
                <p>description</p> 
                {modals[currentModal}
            </div> {modals[currentModal]}
        </div>/span>
    );
}

export default Modal;

而modals.js將匯出一個這樣的物件

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

標籤：

上一篇：如何在路由路徑中傳遞鍵值對作為引數？

下一篇：創建分類時，Rails6Ajax頁面不斷重繪