Reactjs 使用钩子将类组件（Navbar）转换为函数

我正在转换在Material UI文档页面上找到的项目。我正在尝试打开注册对话框（即注册模式）。这里是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;

import React，{useState}来自“React”；
从'@material ui/core/styles'导入{ThemeProvider}；
从“./components/Navbar”导入导航栏
从“./components/DialogHost”导入DialogHost；
从“./components/Loading”导入加载
从“/theme”导入主题；
函数App（）{
常量[signedIn]=useState（false）
const[ready]=useState（true）/！用于测试的切换
const[dialog，setDialog]=useState({
isOpenSignUp:false，
异青霉素：假
});
常量openDialog=e=>{
setDialog（{…dialog[e.target.name]：true}）；
}
const closeDialog=e=>{
setDialog（{…dialog[e.target.name]：false}）；
}
返回(
{！准备好了吗&&
}
{准备好了吗&&
{
const signUpDialog=dialogs.signUpDialog；
返回(
{！签名&&
}
{！签名&&
}
)
}
DialogHost.defaultProps={
签名人：错
};
DialogHost.propTypes={
签名：PropTypes.bool.isRequired，
对话框：PropTypes.object.isRequired
};
导出默认对话框主机

---

我还有一个SignUpDialog.js文件，但它只是呈现了一个标题为“注册”的功能组件。

如果您可以尝试创建一个具有正确依赖项的jsfiddle（），它将更容易帮助您调试此问题的代码沙盒：

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

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