python - 如何将数据从 django 模板发送到我的反应组件

问题描述

我正在尝试制作我的第一个全栈应用程序。我使用 django 作为后端并作为前端做出反应。我从 django 模板发送数据到反应组件时遇到问题。我的views.py 看起来像这样

视图.py

def proba(request):
    view="simple view"
    return render(request,'index.html',{'view': view})
def index(request):
    return render(request,'frontend/main.html')
def index3(request):
    return render(request,'index.html')
def register(request):
    if request.method =='POST':
        user_form=UserRegistrationForm(request.POST)
        if user_form.is_valid():
            new_user=user_form.save(commit=False)
            new_user.set_password(user_form.cleaned_data['password'])
            new_user.save()
            return render(request,'registration/register_done.html',{'new_user':new_user})
    else:
        user_form=UserRegistrationForm()
    return render(request,'registration/register.html',{'user_form':user_form})        
class EventsView(ListModelMixin, CreateModelMixin,GenericViewSet ):
    queryset = Events.objects.all()
    serializer_class=EventsSerializer

` 索引.html

    <body>
    <div>
        {% block content %}
            <div id="root_calendar">
                <script type="text/javascript"> 
                    let a="{{view}}"
                    console.log(a);
                </script>
            </div>

        {% endblock %}
    </div>  
    <script src="{% static "frontend/main.js"  %}"></script>
</body>

我想将 {{view}} 放入我的反应组件 App.js

应用程序.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import ChooseStyle from './ChooseStyle';
class App extends Component{
     render(){
        return (
            <>
                <ChooseStyle />
            </>
        );

    }
}
ReactDOM.render(<App />,document.getElementById('root_calendar'))

index.js

import ChooseStyle from './components/ChooseStyle';
ReactDOM.render(<ChooseStyle />,document.getElementById('root_calendar'))

包.json

{
  "name": "kreator",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch ./kreator/frontend/src/index.js --output ./kreator/frontend/static/frontend/main.js",
    "build": "webpack --mode production ./kreator/frontend/src/index.js --output ./kreator/frontend/static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.3",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "@fortawesome/fontawesome-free": "^5.11.2",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "css-loader": "^3.2.0",
    "node-sass": "^4.12.0",
    "react-inlinesvg": "^1.1.7",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "svg-inline-loader": "^0.8.0",
    "url-loader": "^2.2.0",
    "webpack": "^4.41.1",
    "webpack-cli": "^3.3.9"
  },
  "dependencies": {
    "@fullcalendar/bootstrap": "^4.3.0",
    "@fullcalendar/core": "^4.3.1",
    "@fullcalendar/daygrid": "^4.3.0",
    "@fullcalendar/interaction": "^4.3.0",
    "@fullcalendar/react": "^4.3.0",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "ng-fullcalendar": "^2.0.3",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-bootstrap": "^1.0.0-beta.14",
    "react-dom": "^16.10.2",
    "react-router-dom": "^5.1.2"
  }
}

标签： pythondjangoreactjsreact-component

python - 如何将数据从 django 模板发送到我的反应组件

问题描述

解决方案

推荐阅读