MUI 模式（对话框）在关闭时访问内容答案

【问题标题】：MUI Modal (Dialog) access contents while closedMUI 模式（对话框）在关闭时访问内容
【发布时间】：2022-12-12 13:21:22
【问题描述】：

所以我正在创建一个带有 Material-ui 和 firebase 身份验证的应用程序，我想在 MUI 对话框中包含 firebaseui 的身份验证。

要添加身份验证组件，firebase ui 需要访问带有 "firebaseui-auth-container" id 的元素，在我的例子中，它位于 Dialog 组件的内容中。但是，在关闭时，不会呈现对话框的内容，因此 firebase 无法附加 auth 的 ui 组件。

有没有办法在对话框中附加身份验证 UI？也许对话框的组件呈现但隐藏了？

当前代码：

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import 'firebaseui/dist/firebaseui.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createTheme, ThemeProvider } from '@mui/material';
import { StyledEngineProvider } from '@mui/material/styles';

import { auth as firebaseUIAuth } from 'firebaseui';
import { initializeApp } from 'firebase/app';
import { getAuth, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';
import { getAnalytics } from 'firebase/analytics';


const firebaseConfig = {
  ...
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

const auth = getAuth();
const ui = new firebaseUIAuth.AuthUI(auth);

var uiConfig = {
  ...
};

ui.start('#firebaseui-auth-container', uiConfig);

const theme = createTheme({ ... })

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </StyledEngineProvider>
  </React.StrictMode>
);

reportWebVitals();

/* App.js */

import React from 'react';
import Dialog from '@mui/material/Dialog';
import IconButton from '@mui/material/IconButton';
import PersonIcon from '@mui/icons-material/Person';


function App() {

  const [dialogOpen, toggleDialog] = React.useState(false);

  return (
    <div className="App" id="App">
      <div className='App-home'>
        <IconButton
          aria-label="profile"
          className='App-button_profile'
          onClick={() => toggleDialog(true)}
        >
          <PersonIcon className="big-icon" />
        </IconButton>
        <Dialog open={dialogOpen} onClose={() => toggleDialog(false)}>
          <div id="firebaseui-auth-container"></div>
        </Dialog>
      </div>
    </div>
  );
}

export default App;

非常感谢

【问题讨论】：

标签： javascript reactjs firebase material-ui firebaseui

【解决方案1】：

来自https://mui.com/material-ui/api/modal/你可以提供一个道具keepMounted={true}

keepMounted：始终将孩子保留在 DOM 中。这个道具在 SEO 情况下或当你想最大化模态的响应能力时很有用。

我以类似的方式使用它，以确保 iframe 可用，这样我就可以在模式关闭时 postMessage 到它。

Dialog 也允许来自 Modal 的道具

【讨论】：