Question

（令人遗憾的是）我正在尝试使用钩子转换React + Material UI + Firebase模板（在Material UI文档中找到）。当前，在App.js文件中，App.js文件显示各种对话框（即模式）首先传递到DialogHost组件中，该组件又根据用户单击的内容向屏幕显示各种对话框。并切换（例如登录以提供登录对话框，注册以提供注册）或用户的身份验证状态（例如配置文件以提供配置文件对话框或设置以提供设置对话框）。

现在，没有DialogHost，我要注册并像这样在App.js中登录Dialog的渲染（这是在6月26日之前在模板React + Material UI + Firebase repo中完成的操作）。

       {/* SignUpDialog */}
        <Hidden only='xs'>
          <SignUpDialog
            open={signUpDialog}
            onClose={() => setSignUpDialog(false)}
          />
        </Hidden>
        <Hidden only={['sm', 'md', 'lg', 'xl']}>
          <SignUpDialog
            fullScreen
            open={signUpDialog}
            onClose={() => setSignUpDialog(false)}
          />
        </Hidden>

        {/* SignInDialog */}
        <Hidden only='xs'>
          <SignInDialog
            open={signInDialog}
            onClose={() => setSignInDialog(false)}
          />
        </Hidden>
        <Hidden only={['sm', 'md', 'lg', 'xl']}>
          <SignInDialog
            fullScreen
            open={signInDialog}
            onClose={() => setSignInDialog(false)}
          />
        </Hidden>

我的麻烦是，当我用单个DialogHost组件将以上io.BytesIO()中的代码替换为...时，我可以传递open布尔变量，当用户单击导航栏时，该变量将切换为true。但是，我在传递onClose道具时遇到了麻烦，如果用户单击“取消”按钮，该对话框允许退出对话框...最终，简化版本看起来像这样

App.js

const [signUpDialog, setSignUpDialog] = useState(false)
const [signInDialog, setSignInDialog] = useState(false)

。。

     <DialogHost
          signedIn={signedIn}
          dialogs={
            {
              signUpDialog: {
                dialogProps: {
                  open: signUpDialog,

                  onClose: () => setSignUpDialog(false) //HERE IS WHERE I AM UNSURE
                }
              },

              signInDialog: {
                dialogProps: {
                  open: signInDialog,

                  onClose: () => setSignInDialog(false) //AND HERE
                }
              }
            }
          }
        />

Dialog.js

const DialogHost = ({ signedIn, dialogs }) => {

const signUpDialog = dialogs.signUpDialog;
const signInDialog = dialogs.signInDialog;

return (
    <>
        <Hidden xsDown> //There is other hidden tags, but just not listing for simplicity 
            {!signedIn &&
                <>
                    <SignUpDialog
                        dialogProps={signUpDialog.dialogProps}
                    />
                    <SignInDialog
                        dialogProps={signInDialog.dialogProps}
                    />
                </>
            }
        </Hidden>

SignUpDialog.js

const SignUpDialog = ({ dialogProps }) => {
return (
        <Dialog fullWidth maxWidth="md" {...dialogProps}>
            <DialogTitle>
                Sign up for an account
            </DialogTitle>...
        <DialogActions><Button color='primary' onClick={dialogProps.onClose}>Cancel</Button></DialogActions>

如果有人知道如何帮助解决我遇到的问题，将永远感激

React Hooks传递函数作为对象内的道具

0 个答案: