如何使用淡入/淡出动画有条件地渲染“材质UI”对话框

Question

我有一个非常简单的应用程序，其中包含用户列表。当我单击一个用户时，我希望显示一个对话框，其中包含有关该用户的各种信息。我尝试使用Material UI的Dialog组件通过几种方法来执行此操作，但是我遇到了任何一种问题。

我有一个UserDialog组件，它以用户为道具，并包装Material UI的Dialog来包含一堆用户特定的东西：

UserDialog.jsx

function UserDialog({ open, onClose, user }) {
  const title = `You are editing ${user.name}`
  const body = `This user is ${user.age} years old`

  const [name, setName] = React.useState(user.name)
  // Other stuff that references `user`.

  return (
    <Dialog open={open} onClose={onClose}>
      <h1>{title}</h1>
      <p>{body}</p>
    </Dialog>
  )
}

方法1 –使用open道具

UserList.jsx

function UserList({ users }) {
  const [dialogUser, setDialogUser] = React.useState(null)

  return (
    <React.Fragment>
      {users.map((user) => (
        <button type="button" onClick={() => setDialogUser(user)}>
          {user.name}
        </button>
      ))}
      <UserDialog open={!!dialogUser} onClose={() => setDialogUser(null)} user={dialogUser} />
    </React.Fragment>
  )
}

问题：：当dialogUser设置为null时（例如，最初），UserDialog崩溃是因为它试图访问null上的属性。 / p>

方法2 –条件渲染

UserList.jsx

function UserList({ users }) {
  const [dialogUser, setDialogUser] = React.useState(null)

  return (
    <React.Fragment>
      {users.map((user) => (
        <button type="button" onClick={() => setDialogUser(user)}>
          {user.name}
        </button>
      ))}
      {dialogUser && <UserDialog open onClose={() => setDialogUser(null)} user={dialogUser} />}
    </React.Fragment>
  )
}

问题：此对话框逐渐淡入淡出时，在关闭时突然消失。

---

我知道从理论上讲，可以将内容UserDialog中的内容包装在顶级if (user)块中，但这并不是很好，这也意味着削弱了{ {1}}道具也不理想。

是否有办法让user淡入淡出而不必有条件地呈现其所有内容？

Answer 1

我很确定您需要有条件地渲染内容：/

我建议您使用这种方法：

function UserDialog({ open, onClose, user }) {
  const [data, setData] = React.useState();

  React.useEffect(() => {
    if (!!user && !data) {
      setData(user);
    }
  }, [user, data]);

  const title = `You are editing ${data?.name}`;
  const body = `This user is ${data?.age} years old`;

  return (
    <Dialog open={open} onClose={onClose}>
      <h1>{title}</h1>
      <p>{body}</p>
    </Dialog>
  );
}

美好的一天！