Django 项目中的 React index.js 不呈现导入的组件

Question

我正在尝试构建一个具有混合架构的项目，其中 Django 作为后端，React 作为前端。为此，我使用 Webpack 和 Babel 将 js 文件通过管道传输到 djangos static index-bundle.js。但是我遇到了一个我不明白的问题。显然我无法将其他组件导入我的 index.js 反应文件。相反，根 div 保持为空。

虽然这有效并且文本在浏览器中可见...

ReactDOM.render(
    <h1> React in Django </h1>
    document.getElementById('root')
);

...从另一个组件导入它不起作用（div“root”没有内部元素）

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

class App extends Component {
    render() {
        return (
            <h1>React in Django</h1>
        )
    }
}

最后我想要在 django 项目中有“正常”的反应行为。

Answer 1

感谢@jkarttunen 在中的回答，我找到了解决方案：

原来问题是 Babel 和 React 17 需要设置 "runtime":"automatic"。

{
     "presets": [
         "@babel/preset-env",
        ["@babel/preset-react", {"runtime": "automatic"}]
     ]
}

Django 项目中的 React index.js 不呈现导入的组件

React index.js in Django Project doesn't render imported components

javascript

django

reactjs

webpack