我无法使用 webpack 导入 React 组件

Posted 2023-02-23

【中文标题】我无法使用 webpack 导入 React 组件

【英文标题】：I can't import React components with webpack

【发布时间】：2017-01-03 07:16:22

【问题描述】：

在我的项目中，我有 2 个主文件“app.jsx”和“Layout.jsx”。当我在“app.jsx”中定义布局组件时，它会成功呈现。但是，当我将它移动到“Layout.jsx”并从“app.jsx”中要求它时，它不起作用。 这是我的代码：

“布局.jsx”

module.exports = class Layout extends React.Component 
    render() 
        return(
            <h3>Layout Component</h3>
        )
    

“app.jsx”

const React = require("react");
const ReactDOM = require("react-dom");

const Layout = require("./pages/Layout.jsx");

const App = document.getElementById("app");
ReactDOM.render(<Layout />, App);

我的代码有什么问题？

【问题讨论】：

移至 layout.jsx 后您收到的错误是什么？

Webpack 只是成功地捆绑了文件，但是当我查看 Firefox 的 React 调试工具时，我看到以下消息：“等待根加载...”

你对你的 layout.jsx 文件导入 react 了吗？

【参考方案1】：

在您需要导入的 layout.jsx 文件中

const React = require("react");