这是我的Index.js在更改之前（一切都正常）：
import React from "react"
import * as ReactDOMClient from "react-dom/client";
import App from './App'
import state from './components/Redux/State'
import { ReactDOM } from "react";
ReactDOM.render(<App state={state} />, document.getElementById('app'));然后，我把它改成了这个：
import React from "react"
import App from './App'
import state from './components/Redux/State'
import { ReactDOM } from "react";
ReactDOM.render(<App state={state} />, document.getElementById('app'));所以，我有这个：enter image description here
现在，在添加ReactDOM之后，我有了这个：enter image description here背景上的梯度，就是这样
这是我的App.js代码：
import React from "react"
import Header from './components/Header/Header'
import Navbar from "./components/Navbar/Navbar"
import Profile from "./components/Profile/Profile"
import Dialogs from "./components/Dialogs/Dialogs"
import Music from "./components/Music/Music"
import News from "./components/News/News"
import Settings from "./components/Settings/Settings"
import s from './css/App.module.css'
import b from './css/AppBlureBackground.module.scss'
import { BrowserRouter, Route, Routes } from "react-router-dom"
const App = (props) => {
return (
<BrowserRouter>
<div className={b.app_grideffect_wrap}>
<div className={b.wrap}>
<div className={b.top_plane} ></div>
<div className={b.bottom_plane} ></div>
</div>
<div className={s.app__wraper}>
<Header />
<Navbar state={props.state} />
<div className={s.app__content_wrap}>
<div className={s.content__scroll_wrap}>
<Routes>
<Route path='/profile' element={<Profile posts={props.state.profilePage.posts} />} />
<Route path='/dialogs/*' element={<Dialogs state={props.state} />} />
<Route path='/news' element={<News />} />
<Route path='/music' element={<Music />} />
<Route path='/settings' element={<Settings />} />
</Routes>
</div>
</div>
</div>
</div>
</BrowserRouter>
);
}
export default App所以，我刚刚开始学习React和Redux，我正试图将Redux添加到我的项目中
问题是--我如何用ReactDOM解决这个问题？如何正确地将ReactDOM和Redux添加到我的项目中？
enter image description here和它`s在终端没有错误
我试图添加Redux到我的项目，第一步是添加ReactDOM语法，它的失败.我希望添加Redux，但我没有在我的网站上呈现当我检查浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Frend.Me</title>
</head>
<body onload="animatedCursor();">
<div id="app"></div>
<script src="animatedCursor.js"></script>
</body>
</html>
1条答案
按热度按时间vs3odd8k1#
你不应该像这样传递你的应用状态。这只会是你的Redux状态曾经拥有的第一个值的快照，而不是商店更改后实际存在的更新值。为此，你必须使用
react-redux。请按照official Redux tutorial，你似乎是缺乏很多的基础知识在这里！