我是编码新手，所以我正在遵循本教程：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 ( { btnValues.flat().map((btn, i) => { return ( ); }; export default App;
然后这是index.js：
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; ReactDOM.render(, document.getElementById("root") );
尝试像这样指定根元素：
import React from 'react'; import ReactDOM from 'react-dom'; import { createRoot } from 'react-dom/client'; import './index.css'; import App from './App'; const root = createRoot(document.getElementById('root')); root.render( );从控制台中的错误消息来看，index.js 文件中的 import 语句似乎存在问题。该错误特别指出 ReactDOM 是从“react-dom/client”导入的，这不是有效的导入路径。
要解决此问题，您应该更新 index.js 文件中的导入语句，以从“react-dom”而不是“react-dom/client”导入 ReactDOM。这是更正后的导入语句：