我是编码新手,所以我正在遵循本教程:https://www.sitepoint.com/react-tutorial-build-calculator-app/ 我无法渲染任何元素。这是运行网络应用程序时控制台显示的内容
这是我的 App.js 代码:
import Wrapper from "./components/Wrapper.js"; import Screen from "./components/Screen.js"; import ButtonBox from "./components/ButtonBox.js"; import Button from "./components/Button.js"; const btnValues = [ ["C", "+-", "%", "/"], [7, 8, 9, "X"], [4, 5, 6, "-"], [1, 2, 3, "+"], [0, ".", "="], ]; const App = () => { return ( <Wrapper> <Screen value="0" /> <ButtonBox> { btnValues.flat().map((btn, i) => { return ( <Button key={i} className={btn === "=" ? "equals" : ""} value={btn} onClick={() => { console.log(`${btn} clicked!`); }} /> ); }) } </ButtonBox> </Wrapper> ); }; export default App;
然后这是index.js:
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") );
尝试像这样指定根元素:
从控制台中的错误消息来看,index.js 文件中的 import 语句似乎存在问题。该错误特别指出 ReactDOM 是从“react-dom/client”导入的,这不是有效的导入路径。
要解决此问题,您应该更新 index.js 文件中的导入语句,以从“react-dom”而不是“react-dom/client”导入 ReactDOM。这是更正后的导入语句: