我想通过脚本标记内的django模板是否通过用户名身份验证，该脚本标记为reactjs页面呈现数据，以便我可以使用react router来路由用户登录或注销。为此，我做了如下操作，但没有运气。我无法在 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;
}
}
最佳答案
您希望该 props 在您的 Homepage 组件上显示为 this.props.data.isAuthenticated，但您没有向该组件传递任何 props当你渲染它时。
您需要从 showHomepage 方法传递 data 参数。
ReactDOM.render(
<Homepage data={data}/>,
document.getElementById(id)
);
您还可以删除 document.getElementById 的第二个参数(它只接受一个)。
关于javascript - 作为 props 传递的数据不会在 django 和 Reactjs 中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35595138/