Question

在我简单的Dialog组件中，我使用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视图中进行切换。但是，运行时，代码将在浏览器中显示这两个元素。尽管将SIGN-UP属性设置为display，仍应隐藏的"none"块仍然出现：

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

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

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

在这两种状态之间切换。

尽管显示=“ none”，但仍显示材质对话框

1 个答案: