Django中的ReactJs return

问题描述 投票:0回答:1

我是Reactify Django的新手。实际上,我正在尝试渲染React JS而不是HTML页面。我有以下内容:

views.py

from django.shortcuts import render

def home(request):
    return render (request, 'home.html')

home.html做为

<html>
    <head>
        {% load staticfiles %}
        <script src="{% static '/App.js' %}"></script>
    </head>
    <body>
        <p>Hello World Home</p>
        {% block content %}{% endblock %}
    </body>
</html>

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      Hello to react app!
    </div>
  );
}

export default App;

settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(SETTINGS_PATH, 'frontend/src'),
)

我不确定,如果我正确地理解了这个概念。但是我正在寻找在django中返回react渲染的html。我在同一个文件夹的frontend目录中安装了我的react应用程序。任何澄清,将不胜感激。

django reactjs reactify
1个回答
0
投票

您需要将脚本封装在Django模板块中,所以类似-


{% block scripts %}
    <script src="{% static '/App.js' %}"></script>
{% endblock %}


0
投票

您需要将组件呈现到DOM中。使用render模块中的react-dom功能。

实施例:

home.html做为

<html>
    <head>
        {% load staticfiles %}
        <script src="{% static '/App.js' %}"></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

App.js

import React from 'react';
import ReactDom from 'react-dom'
import logo from './logo.svg';
import './App.css';

const App = () => {
  return (
    <div className="App">
      Hello to react app!
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
© www.soinside.com 2019 - 2024. All rights reserved.