我无法使用 webpack 导入 React 组件

Question

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

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

我的代码有什么问题？

Answer 1

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

const React = require("react");

我无法使用 webpack 导入 React 组件

I can't import React components with webpack

import

components

require

reactjs

webpack