Javascript 如何有条件地渲染带有淡入/淡出动画的材质UI对话框

我有一个非常简单的应用程序，其中包含一个用户列表。当我单击其中一个用户时，我希望显示一个对话框，其中包含有关该用户的各种信息。我曾尝试使用Material UI的

对话框

组件，使用几种方法来实现这一点，但无论哪种方法，我都会遇到问题

我有一个

UserDialog

组件，该组件将用户作为道具，并将材质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>
  )
}

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

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

问题：当

dialogUser

设置为

null

（例如最初）

UserDialog

崩溃，因为它试图访问

null

上的属性

方法2–条件渲染 UserList.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>
  )
}

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

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

函数用户列表（{users}）{
const[dialogUser，setDialogUser]=React.useState（null）
返回(
{users.map（（用户）=>(
setDialogUser（用户）}>
{user.name}
))}
{dialogUser&&setDialogUser（null）}user={dialogUser}/>}
)
}

问题：当此对话框很好地淡入时，在关闭时会突然消失

---

我知道从理论上讲，将

UserDialog

中的内容包装在顶级

if（user）

块中是可行的，但这不是很好，也意味着削弱

user

道具的道具类型，这也不理想

---

有没有办法让

对话框

淡入淡出，而不必有条件地呈现其所有内容？

我确信您需要有条件地呈现内容：/

我建议您使用这种方法：

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

functionuserdialog（{open，onClose，user}）{
const[data，setData]=React.useState（）；
React.useffect（（）=>{
如果（！！用户和数据）{
设置数据（用户）；
}
}，[用户，数据]；
const title=`您正在编辑${data？.name}`；
const body=`此用户为${data？.age}岁'；
返回(
{title}
{body}

);
}

---

好极了

我确信您需要有条件地呈现内容：/

我建议您使用这种方法：

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

functionuserdialog（{open，onClose，user}）{
const[data，setData]=React.useState（）；
React.useffect（（）=>{
如果（！！用户和数据）{
设置数据（用户）；
}
}，[用户，数据]；
const title=`您正在编辑${data？.name}`；
const body=`此用户为${data？.age}岁'；
返回(
{title}
{body}

);
}

好极了