Question

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

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

打开对话框的职责应该是主要组成部分。这样，仅当state属性为true时才呈现模态。另一个提示是使用<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

要减少代码的某些冗余，可以通过实质上切换当前状态来在一个函数中设置打开/关闭。我确实是内联的，但是您仍然可以创建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中管理对话框的最佳方法

2 个答案: