Ich bin neu im Programmieren und folge daher diesem Tutorial: https://www.sitepoint.com/react-tutorial-build-calculator-app/ Ich kann keine Elemente rendern. Dies zeigt die Konsole beim Ausführen einer Webanwendung
Das ist mein App.js-Code:
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;
Dann ist das 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")
); 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
尝试像这样指定根元素：
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( <React.StrictMode> <App /> </React.StrictMode> );从控制台中的错误消息来看，index.js 文件中的 import 语句似乎存在问题。该错误特别指出 ReactDOM 是从“react-dom/client”导入的，这不是有效的导入路径。
要解决此问题，您应该更新 index.js 文件中的导入语句，以从“react-dom”而不是“react-dom/client”导入 ReactDOM。这是更正后的导入语句：