尽管 display="none" 仍显示材质对话框答案

【问题标题】：Material dialog showing despite display="none"尽管 display="none" 仍显示材质对话框
【发布时间】：2019-08-03 12:26:18
【问题描述】：

在我的简单对话框组件中，我使用 React 状态在两个视图之间切换：

const SignInDialog = (props) => {
  const {
    classes, pageURL, handleClose, open, setOpen
  } = props;

  const [displaySignIn, setDisplaySignIn] = useState('inherit');
  const [displaySignUp, setDisplaySignUp] = useState('none');
  const toggleSignUp = () => {
    setDisplaySignIn('none');
    setDisplaySignUp('inherit');
  };
  const toggleSignIn = () => {
    setDisplaySignUp('none');
    setDisplaySignIn('inherit');
  };

  return (
    <Dialog
      maxWidth="xs"
      open={open}
      onClose={handleClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title" className={classes.dialogTitle}>Sign in</DialogTitle>
      <DialogContent component="div" display={displaySignIn}>
        <DialogContentText>
          SIGN IN
          <Button color="inherit" onClick={toggleSignUp}>Sign up</Button>
        </DialogContentText>
      </DialogContent>
      <DialogContent component="div" display={displaySignUp}>
        <DialogContentText>
          SIGN UP
          <Button color="inherit" onClick={toggleSignIn}>Sign in</Button>
        </DialogContentText>
      </DialogContent>
    </Dialog>
  );
};

可以看出，这个想法是在加载时只显示SIGN IN 元素。在这个视图中，有一个按钮点击应该在SIGN UP 视图中切换。但是，在运行时，代码会在浏览器中显示这两个元素。尽管display 属性设置为"none"，但应隐藏的SIGN-UP 块仍会显示：

<div class="MuiDialogContent-root" component="div" display="inherit">...</div>
<div class="MuiDialogContent-root" component="div" display="none">...</div>

不应该隐藏第二个<div> 块吗？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

DialogContent 没有道具展示。这就是为什么你会看到两者，因为它只是被忽略了。您应该将 displaySignIn 和 displaySignUp 更改为布尔值并使用如下三元运算符：

{displaySignIn && <DialogContent component="div">
    <DialogContentText>
      SIGN IN
      <Button color="inherit" onClick={toggleSignUp}>Sign up</Button>
    </DialogContentText>
  </DialogContent>}
  {displaySignUp && <DialogContent component="div">
    <DialogContentText>
      SIGN UP
      <Button color="inherit" onClick={toggleSignIn}>Sign in</Button>
    </DialogContentText>
  </DialogContent>}

在这两种状态之间切换。

【讨论】：