django 和 reactjs 中不显示作为 props 传递的数据答案

【问题标题】：Data passed as props is not shown in django and reactjsdjango 和 reactjs 中不显示作为 props 传递的数据
【发布时间】：2016-06-06 07:53:32
【问题描述】：

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

index.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)
        );
}

Homepage.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;
        }
    }

【问题讨论】：

标签： javascript django reactjs

【解决方案1】：

您希望该道具以this.props.data.isAuthenticated 的形式出现在您的Homepage 组件上，但您在渲染它时并未将任何道具传递给该组件。

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

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

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

【讨论】：

糟糕的是，我忘记在主页组件中将数据作为道具传递。谢谢你的帮助。我为我感到遗憾:)。