React Hooks 问题：打开一个模块化的模态

Question

我正在为学校项目开发基于Material UI的React.js应用程序。我的项目基于Material UI 文档中的React + Material UI + Firebase示例。目前，我正在尝试使用，这样我就可以避免使用 Redux（并在将来开发的东西上做得更好）。在 app 组件中，它们有一个openDialog函数，该函数作为一种基于 dialogId 打开模态的方式。React Hooksclass App extends Component {  constructor(props) {    super(props);this.state = {  signUpDialog: {    open: false  },  signInDialog: {    open: false  },  settingsDialog: {    open: false  },  signOutDialog: {    open: false  }};}// CURRENT, NON-HOOKS WAYopenDialog = (dialogId, callback) => {   const dialog = this.state[dialogId];   if (!dialog || dialog.open === undefined || null) {     return;   }   dialog.open = true;   this.setState({ dialog }, callback); };然后他们有一个导航栏，而不是使用相应的对话框调用此函数（例如onSignUpClick={() => this.openDialog('signUpDialog')}）我目前正在尝试使用钩子将其移动有人可以教我/帮我转换这个模块化功能吗！

Answer 1

import React from 'react'

function App({ callback }) {

  // if we just mind about the active dialog,

  // we don't need to save the state of the others

  const [dialog, setDialog] = React.useState(null)

  // here useEffect is called every time, dialog changed,

  // we also need to put `callback` in the array otherwise

  // React throw a warning.

  // React.useEffect act like `ComponentDidMount`, so we better

  // check dialog is not empty otherwise it will call our callback

  // straight away AFTER the render and that's not what we want

  React.useEffect(() => {

    if (dialog) callback()

  }, [dialog, callback])

  // You said we were in a navBar so i can assume you can do 

  // something like this

  return (

    <div>

      {['signUp', 'signInDialog', 'settingsDialog', 'signOutDialog'].map(

        elem => (

          <div key={elem} onClick={() => setDialog({ [elem]: true })}>

            {elem}

          </div>

        ),

      )}

    </div>

  )

}

export default App

Answer 2

const [dialog, setDialog] = useState({

  isOpensignUp: false,

  isOpenSignIn: false,

  isOpenSignOut: false,

  isOpenSetting: false

});

const handleDialog =  e  => {

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

}

<button name= "isOpensignUp" onClick={handleDialog} />

<Dialog open={dialog.isOpensignUp}>