React计算器项目中App.js无法渲染元素，求正常运行的解决方法

我是编程新手，正在制作React计算器应用，但无法渲染任何元素。运行Web应用时控制台报错，截图如下：

我的代码 #

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")
);

问题解决 #

1. 修复ReactDOM渲染API（核心问题） #

控制台错误提示ReactDOM.render is no longer supported in React 18，说明你使用了React 18版本，但代码里仍沿用旧的渲染方式。需改用React 18的createRoot API：

修改后的index.js代码：

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

// 创建根节点并渲染应用
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. 检查子组件完整性 #

确保Wrapper、Screen、ButtonBox、Button这几个自定义组件都已正确创建：

• 组件文件存在于./components/目录下，文件名和导入路径完全一致（比如Wrapper.js确实存在）
• 每个组件都使用了默认导出（export default 组件名），保证App.js能正确导入

内容的提问来源于stack exchange，提问作者alessi.gg