createRoot(...): 目标容器不是 DOM 元素？答案

【问题标题】：createRoot(...): Target container is not a DOM element?createRoot(...): 目标容器不是 DOM 元素？
【发布时间】：2022-08-17 06:20:15
【问题描述】：

createRoot(...): 目标容器不是 DOM 元素？需要改变什么？ \'看起来你的帖子主要是代码；请添加更多详细信息。\', \'看起来您的帖子主要是代码；请添加更多详细信息。\',\'看起来您的帖子主要是代码；请添加更多详细信息。\'

应用程序.test.tsx

import { createRoot } from \"react-dom/client\";
import App from \"./App\";


it(\'renders without crashing\', () => {
  const root = createRoot(document.getElementById(\"root\") as HTMLElement);
  render(<App/>)
});

索引.tsx

import ReactDOM from \'react-dom/client\';
import App from \'./App\';

const root = ReactDOM.createRoot(document.getElementById(\'root\') as HTMLElement);

root.render (
              <App/>     
)

应用程序.tsx

import React from \'react\';
import \'./Reset.css\';
import \'./App.css\';
import Main from \'./components/Main/Main\';
import HeaderContainer from \'./components/Header/HeaderContainer\';
import { connect, Provider } from \'react-redux\';
import Preloader from \'./components/common/Preloader/Preloader\';
import { initializeApp } from \'./redux/appReducer\';
import { HashRouter, Route, Routes } from \'react-router-dom\';
import store, { AppStateType } from \'./redux/redux-store\';
import Footer from \'./components/Footer/Footer\';
import GuestPage from \'./components/common/GuestPage/GuestPage\';
import ContainerLogin from \'./components/common/Login/ContainerLogin\';


type MapStateType = {
  isAuth: boolean
  initializedApp: boolean
}

type DispatchPropsType = {
  initializeApp: () => void
}

class SocialApp extends React.Component<MapStateType & DispatchPropsType> {

  componentDidMount() {
    this.props.initializeApp()
  }

  render () {
    if (!this.props.initializedApp) { 
      return <Preloader/>
    } else return (
      <>
          <HeaderContainer/>
          <div className=\'main__wrapper\'>
            <Routes>            
                <Route path=\"/*\" element={<Main/>}/>
                <Route path=\"/guestpage\" element={<GuestPage/>}/>
                <Route path=\"/login\" element={<ContainerLogin/>}/>  
            </Routes>
            </div>
          <Footer/>
      </>
    )
  }
}
///////////////////////////////////////////////////////////////////////////////

const mapStateToProps = (state: AppStateType) => ({
  initializedApp: state.app.initialized,
  isAuth: state.auth.isAuth
})

const mapDispatchToProps = (dispatch: any) => ({
  initializeApp: () => {
    dispatch(initializeApp())
  },
})


let AppContainer = connect(mapStateToProps, mapDispatchToProps)(SocialApp);


const App: React.FC<{}> = () => {
    return  (<HashRouter>
              <Provider store={store}>
                <div className=\'App__wrapper\'>
                  <AppContainer/>
                </div>
              </Provider>
            </HashRouter>)
}

export default App

标签： reactjs jestjs

【解决方案1】：

确保您在 index.tsx 中定义的元素名称（例如，“root”）也在您的 index.html 文件的正文中指定。例如：

索引.tsx

...
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
...

索引.html

<html>
  <body>
    <div id="root"></div>
  </body>
</html>

【讨论】：