在 React 中管理对话框的最佳方式

Question

不知道有没有更好的方法来管理功能组件中Dialogs的打开和关闭？您可以在下面找到一个示例：

import React, { useState } from 'react';
import PropTypes from 'prop-types';

import EditDialog from './EditDialog';
import DeleteDialog from './DeleteDialog';


const ContactCard = ({ contact }) => {
  const [editOpen, setEditOpen] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);

  const handleEditOpen = () => {
    setEditOpen(true);
  };
  const handleEditClose = () => {
    setEditOpen(false);
  };
  const handleDeleteOpen = () => {
    setDeleteOpen(true);
  };
  const handleDeleteClose = () => {
    setDeleteOpen(false);
  };

  const { type, firstName, lastName, phoneNumber, mail } = contact;
  return (
    <>
      <div className={classes.main}>
        {/* All my contact informations */}
      </div>
      <EditDialog handleClose={handleEditClose} open={editOpen} />
      <DeleteDialog handleClose={handleDeleteClose} open={deleteOpen} />
    </>
  );
};

ContactCard.propTypes = {
  contact: PropTypes.object.isRequired
};

export default ContactCard;

我认为这是超级多余的，但我找不到更好的方法来管理多个不同的对话框。

const handleEditOpen = () => {
    setEditOpen(true);
  };
  const handleEditClose = () => {
    setEditOpen(false);
  };
  const handleDeleteOpen = () => {
    setDeleteOpen(true);
  };
  const handleDeleteClose = () => {
    setDeleteOpen(false);
  };

非常感谢您的宝贵时间和建议！

Answer 1

打开对话框的责任应该是主组件。这样，仅当状态属性为真时才会呈现模态。另一个技巧是使用 <React.Fragment> 代替 <>

import React, { useState } from 'react';
import PropTypes from 'prop-types';

import EditDialog from './EditDialog';
import DeleteDialog from './DeleteDialog';


const ContactCard = ({ contact }) => {
  const [editOpen, setEditOpen] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);

  const handleEditOpen = () => {
    setEditOpen(!editOpen);
  };

  const handleDeleteOpen = () => {
    setDeleteOpen(!deleteOpen);
  };

  const { type, firstName, lastName, phoneNumber, mail } = contact;
  return (
    <React.Fragment>
      <div className={classes.main}>
        {/* All my contact informations */}
      </div>
      {
         editOpen && <EditDialog handleClose={handleEditOpen} />
      }
      {
        deleteOpen && <DeleteDialog handleClose={handleDeleteOpen} /> 
      }
    </React.Fragment>
  );
};

ContactCard.propTypes = {
  contact: PropTypes.object.isRequired
};

export default ContactCard;

Answer 2

为了减少代码的一些冗余，您可以在一个函数中设置 open/close，实质上是切换当前状态。我做了我的内联，但你仍然可以创建一个 handleEdit 函数并在那里切换状态。

import React, {useState} from "react";
import ReactDOM from "react-dom";

function App() {
  const [editCard, setEditCard] = useState(false)
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => setEditCard(!editCard)}>Toggle Edit</button>
      {editCard && <div>Card is open for editing</div>}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是您的代码的另一个示例。我没有运行它，但它应该看起来像这样。

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import EditDialog from './EditDialog';
import DeleteDialog from './DeleteDialog';


const ContactCard = ({ contact }) => {
  const [editOpen, setEditOpen] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);

  const handleEdit = () => {
    setEditOpen(!editOpen);
  };

  const handleDelete = () => {
    setDeleteOpen(!deleteOpen);
  };

  const { type, firstName, lastName, phoneNumber, mail } = contact;
  return (
    <>
      <div className={classes.main}>
        {/* All my contact informations */}
      </div>
      {
         editOpen && <EditDialog handleEdit={handleEdit} />
      }
      {
        deleteOpen && <DeleteDialog handleClose={handleClose} /> 
      }
    </>
  );
};

ContactCard.propTypes = {
  contact: PropTypes.object.isRequired
};

export default ContactCard;

在 React 中管理对话框的最佳方式

Best way to manage Dialogs in React

modal-dialog

reactjs

material-ui

react-hooks