Question

我的Django项目具有以下结构：

我在浏览器中显示questions.html：

<html>
  <head>
  </head>

  <body>
  Questions:

  <div id="questionSpace"></div>

  <script src="../js/frontEnd/src/App.js"/>

  </body>
</html>

questions.html引用App.js中的代码：

import {React, Component} from 'react';
import logo from './logo.svg';
import ReactDOM from 'react-dom';
import './App.css';

class App extends Component {

  componentWillMount() {
    fetch(`http://localhost:8000/api/questions`)
      .then(result => {
        this.setState({questions: result.json()})
      })
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <ul>
          {this.state.questions.map(question => <li>question.content</li>)}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("questionSpace"));

出于某种原因，javascript代码不包含在html页面中。

知道可能导致这种情况的原因吗？

Answer 1

首先，您可能想要使用<script ...></script> instead of <script ... />

其次，如果你使用JSX和/或ES6（例如import语法），你想先编译它们，然后在页面中包含已编译的.js，而不是源JSX。

最后，如果将questions.html呈现为Django模板，除非您将Django设置为serve static files，否则包括<script src="../js/frontEnd/src/App.js"></script>将无效。在/static/

  <script src="/static/js/frontEnd/dist/App.js"></script>

上面请注意，我使用dist/App.js代替src/App.js来强调您最终需要编译.js

无法导入前端代码

1 个答案: