我是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模板块中,所以类似-
{% block scripts %}
<script src="{% static '/App.js' %}"></script>
{% endblock %}
您需要将组件呈现到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'));