Javascript 作为道具传递的数据不会显示在django和reactjs中_Javascript_Django_Reactjs

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

javascript django reactjs

Javascript 作为道具传递的数据不会显示在django和reactjs中,javascript,django,reactjs,Javascript,Django,Reactjs,我想通过脚本标记内的django模板验证用户名是否经过身份验证，该脚本标记为reactjs页面呈现数据，以便我可以使用ReactRouter路由用户登录或注销。为此，我做了如下操作，但运气不佳。我无法在react页面中使用this.props获取值。我在控制台中收到一个错误，错误为“Uncaught TypeError:无法读取未定义的属性'isUserAuthenticated'。我做错了什么？如果我不能解释清楚的话，我的英语很抱歉。我希望我的代码可以启发您我正在尝试做什么 index.htm

我想通过脚本标记内的django模板验证用户名是否经过身份验证，该脚本标记为reactjs页面呈现数据，以便我可以使用ReactRouter路由用户登录或注销。为此，我做了如下操作，但运气不佳。我无法在react页面中使用this.props获取值。我在控制台中收到一个错误，错误为“Uncaught TypeError:无法读取未定义的属性'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>

{%load staticfiles future i18n帐户租赁\u标记%}
风险值数据={
isUserAuthenticated:{%if request.user.is_authenticated%}true{%else%}false{%endif%}
};
$（函数（）{
app.showHomePage（“主页”，数据）；
});

js（网页包的入口点）

从“React”导入React；
从“react dom”导入react dom；
从“主页/主页”导入主页；
window.app={
showHomePage:功能（id、数据）{
ReactDOM.render(
，document.getElementById（id，数据）
);
}

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

从“React”导入React；
从“./components/Navbar”导入Navbar；
从“./components/Body”导入正文；
类。组件{
render（）{
log（this.props.data.isUserAuthenticated）；
返回(
);
}
}
导出默认主页；
}
}

您希望道具以

此.props.data.isAuthenticated

的形式显示在

主页上，但渲染时不会向组件传递任何道具
您需要通过showHomepage
方法传递data
参数
ReactDOM.render(
  <Homepage data={data}/>,
  document.getElementById(id)
);

ReactDOM.render(
,
document.getElementById（id）
);

您还可以删除document.getElementById的第二个参数（它只接受一个）。我的糟糕，我忘了在我的主页组件中作为道具传递数据。谢谢你的帮助。我同情我：）。
ReactDOM.render(
  <Homepage data={data}/>,
  document.getElementById(id)
);