Question

如果用户名是否经过身份验证，我想传递来自脚本标记内的django模板，该模板为reactjs页面呈现数据，以便我可以使用react路由器来路由用户登录或注销。为此，我做了如下，但没有运气。我无法在反应页面中使用this.props获取值。我在控制台中收到错误，因为＆＃34; Uncaught TypeError：无法读取属性＆＃39; isUserAuthenticated＆＃39;未定义＆＃34;。我做错了什么？如果我无法解释清楚，对不起我的英语。我希望我的代码可以启发你我想要做的事情。

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

Answer 1

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

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

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

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

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

1 个答案: