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

Question

我（仍然很遗憾）尝试使用钩子转换React + Material UI + Firebase模板（在 Material UI 文档中找到）。目前，在 src 中的 components 文件夹中，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>

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

应用程序.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
                }
              }
            }
          }
        />

对话框.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>

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

标签： reactjsreact-hooks