使用钩子将类组件（Navbar）转换为功能

Question

我正在转换在Material UI文档页面上找到的React + Material UI + Firebase项目。我正在尝试打开“注册对话框”（即“注册模式”）。这是4个相应文件的简化版本，我需要帮助打开注册模式。

App.js

import React, { useState } from 'react';

import { ThemeProvider } from '@material-ui/core/styles';

import Navbar from './components/Navbar'
import DialogHost from './components/DialogHost';
import Loading from './components/Loading'

import theme from './theme';

function App() {
  const [signedIn] = useState(false)
  const [ready] = useState(true) //!toggle for testing
  const [dialog, setDialog] = useState({
    isOpenSignUp: false,
    isOpenSignIn: false
  });

  const openDialog =  e  => {
    setDialog({...dialog,[e.target.name]: true});
  }

  const closeDialog =  e  => {
    setDialog({...dialog,[e.target.name]: false});
  }

  return (
    <ThemeProvider theme={theme}>
      {!ready &&
        <Loading />
      }
      {ready &&
        <>
          <Navbar 
            signedIn={signedIn}

            onSignUpClick={openDialog}
            onSignInClick={openDialog}
          /> 

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

                    //onClose below hasn't been converted... not entirely sure how
                    onClose: (callback) => { 
                      this.closeDialog('signUpDialog'); 

                      if (callback && typeof callback === 'function') {
                        callback();
                      }
                    }
                  }
                },
              }
            }
          />
        </>
      }
    </ThemeProvider>
  );
}

export default App;

Navbar.js

import React from 'react'

import PropTypes from 'prop-types';

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';

const Navbar = ({ signedIn, onSignUpClick, onSignInClick }) => {
    return (
        <AppBar color="primary" position="static">
            <Toolbar variant="regular">
                <Box flexGrow={1}>
                    <Typography color="inherit" variant="h6">{process.env.REACT_APP_NAME}</Typography>
                </Box>

                {!signedIn &&
                    <>
                        <Box mr={1}>
                            <Button name="isOpenSignUp" color="secondary" variant="contained" onClick={onSignUpClick}>Sign Up</Button> //GAVE THE BUTTON NAMES, BUT THIS DOESN'T SEEM CORRECT...
                        </Box>

                        <Button name="isOpenSignIn" color="secondary" variant="contained" onClick={onSignInClick}>Sign In</Button> 
                    </>
                }
            </Toolbar>
        </AppBar>
    )
}

Navbar.defaultProps = {
    signedIn: false
};

Navbar.propTypes = {
    signedIn: PropTypes.bool.isRequired
};

export default Navbar

DialogHost.js

import React from 'react'


import PropTypes from 'prop-types';

    import Hidden from '@material-ui/core/Hidden';

    import SignUpDialog from '../../pages/SignUpDialog';

    const DialogHost = ({ signedIn, dialogs }) => {
        const signUpDialog = dialogs.signUpDialog;

        return (
            <>
                <Hidden xsDown>
                    {!signedIn &&
                        <>
                            <SignUpDialog
                                dialogProps={signUpDialog.dialogProps}

                                {...signUpDialog.props}
                            />
                        </>
                    }
                </Hidden>

                <Hidden smUp>
                    {!signedIn &&
                        <>
                            <SignUpDialog
                                dialogProps={{
                                fullScreen: true,

                                ...signUpDialog.dialogProps
                                }}

                                {...signUpDialog.props}
                            />
                        </>
                    }
                </Hidden>
            </>
        )
    }

    DialogHost.defaultProps = {
        signedIn: false
    };

    DialogHost.propTypes = {
        signedIn: PropTypes.bool.isRequired,
        dialogs: PropTypes.object.isRequired
    };

    export default DialogHost

我也有一个SignUpDialog.js文件，但它只是呈现标题为“ Sign Up”的功能组件