React.Js 未在 Django 项目中呈现

IT技术 javascript html django reactjs
2021-05-09 15:12:08

我正在创建一个项目,其中 react 未在 django localhost 上呈现任何内容

索引.html

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body>
        <div id="App">
            <!---all will be define in App.js-->
            <h1>Index.html </h1>
        </div>
    </body>
    {% load static%}
    <script src="{% static "frontend/main.js" %}"></script>
</html>

应用程序.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './layout/header';

class App extends Component {
    render() {
        return (
        <h1>App.JS</h1>
        )
    }
}

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

这是我的项目结构:

项目结构

在运行 npm run dev 和 python manage.py runserver 之后,这是一切正常的状态,直到这里:

状态

3个回答

更改此源代码:

document.getElementById('app')

...到这个:

document.getElementById('App')

这是因为您的元素的 id 为“App”,但您正在尝试将 react app 挂接到元素“app”上。它区分大小写。

document.getElementById 区分大小写