刚开始学习React.js,我正在尝试构建一个可以在两个状态下的可重用标头;用户登录||用户未登录。
// Header.js
var Header = React.createClass({
renderLoggedIn: function() {
return (
<div>
<a href="index.html">Main</a>
<a href="user.html">User profile</a>
<hr/>
</div>
);
},
renderNormal: function() {
return (
<div>
<a href="index.html">Main</a>
<a href="login.html">Login</a>
<hr/>
</div>
);
},
render: function() {
if (this.props.type == "normal") {
return this.renderNormal();
}
else {
return this.renderLoggedIn();
}
}
});
React.render(<Header type="normal" />, document.getElementById('header'))
在主html文件(index.html)中,我添加标题:
// Index.html
<header id="header"></header>
<script src="src/header.js" type="text/jsx"></script>
我有另一个名为functions.js的文件,其中存在一个isUserLoggedIn()函数。从此函数返回确定用户是否登录,这应该反映在标题中。
// functions.js
function isUserLoggedIn() {
return // true or false;
}
我把这个逻辑放在哪里?可以/我应该从React模板文件中调用isUserLoggedIn()函数吗?如果是这样,怎么样?
答案 0 :(得分:1)
要回答您的问题,登录状态可以作为属性传递。
// Header.js
var Header = React.createClass({
renderLoggedIn: function() {
return (
<div>
<a href="index.html">Main</a>
<a href="user.html">User profile</a>
<hr/>
</div>
);
},
renderNormal: function() {
return (
<div>
<a href="index.html">Main</a>
<a href="login.html">Login</a>
<hr/>
</div>
);
},
render: function() {
if (this.props.isLoggedIn) {
return this.renderNormal();
}
else {
return this.renderLoggedIn();
}
}
});
React.render(<Header isLoggedIn ={isUserLoggedIn()}/>, document.getElementById('header'))
属性是不可变的,所以总是向下传递。 考虑使用Flux / Reflux进行更复杂的实施。