如何使用淡入/淡出动画有条件地渲染材质 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 上的属性。

方法 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) 块内是可行的，但这不是很好，这也意味着削弱 user 道具的道具类型也不理想。

有没有办法让Dialog 淡入淡出而不必有条件地渲染其所有内容？

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>
  );
}

美好的一天！