如何让我的 App.js 文件正常运行?
P粉063039990
P粉063039990 2023-09-11 21:07:58
0
2
610

我是编码新手,所以我正在遵循本教程: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")
);

P粉063039990
P粉063039990

全部回复(2)
P粉426906369

尝试像这样指定根元素:

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>
);
P粉138871485

从控制台中的错误消息来看,index.js 文件中的 import 语句似乎存在问题。该错误特别指出 ReactDOM 是从“react-dom/client”导入的,这不是有效的导入路径。

要解决此问题,您应该更新 index.js 文件中的导入语句,以从“react-dom”而不是“react-dom/client”导入 ReactDOM。这是更正后的导入语句:

import ReactDOM from 'react-dom';
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板