作为 props 传递的数据不会显示在 django 和 reactjs 中

Data passed as props is not shown in django and reactjs

本文关键字：显示 django reactjs props 数据 作为      更新时间：2023-09-26

我想通过用户名是否从脚本标签内的 django 模板中进行身份验证，该模板为 reactjs 页面呈现数据，以便我可以使用 react 路由器路由用户登录或注销。为此，我做了如下，但没有运气.我无法在我的反应页面中使用 this.props 获取值。我在控制台中收到错误，因为"未捕获的类型错误：无法读取未定义的属性'是用户身份验证'"。我做错了什么？对不起我的英语，如果我不能解释清楚。我希望我的代码可以启发你我正在尝试做的事情。

索引.html 

{% load  staticfiles future i18n account rental_tags %}
    <div id="homepage">
    </div>
    <script type="text/javascript" src="{% static 'build/js/app.js'%}"></script>
    <script type="text/javascript">
      var data = {
            isUserAuthenticated:{% if request.user.is_authenticated %}true{% else %}false{% endif %}
        };
    $(function() {
      app.showHomePage("homepage",data);
    });
    </script>

index.js（webpack 的入口点）

import React from 'react';
import ReactDOM from 'react-dom';
import Homepage from 'homepage/Homepage';
 window.app = {
        showHomePage: function(id,data){
        ReactDOM.render(
          <Homepage />, document.getElementById(id,data)
        );
}

主页.js

import React from 'react';
import Navbar from './components/Navbar';
import Body from './components/Body';
class Homepage extends React.Component {
  render() {
    console.log(this.props.data.isUserAuthenticated);
    return (
            <div className="layer">
              <Navbar />
              <Body />
            </div>
      );
  }
}
export default Homepage;
        }
    }

您希望道具在Homepage组件上显示为this.props.data.isAuthenticated，但在渲染组件时不会将任何道具传递给组件。

需要从 showHomepage 方法传递 data 参数。

ReactDOM.render(
  <Homepage data={data}/>,
  document.getElementById(id)
);

您还可以删除要document.getElementById的第二个参数（仅接受一个参数）。

相关文章：