如何将数据从Django模板发送到我的react组件

Question

我正在尝试制作我的第一个fullstack应用程序。 我使用django作为后端，react作为前端。 从django模板向react组件发送数据时遇到问题。 我的视图.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

^{pr2}$

我想把{{view}}放在我的react组件中应用程序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'))

索引.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"
  }
}