gpt4 book ai didi

javascript - React.js : Add component with value

转载 作者:行者123 更新时间:2023-12-03 09:08:50 26 4
gpt4 key购买 nike

刚刚开始学习 React.js,我正在尝试构建一个可以处于两种状态的可重复使用的 header ;用户已登录||用户未登录。

// 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()函数。该函数的返回确定用户是否登录,这应该反射(reflect)在 header 中。

// functions.js
function isUserLoggedIn() {
return // true or false;
}

我应该把这个逻辑放在哪里?我可以/应该从 React 模板文件中调用 isUserLoggedIn() 函数吗?如果是这样,怎么办?

最佳答案

为了回答您的问题,可以将登录状态作为属性传递。

// 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 来实现更复杂的实现。

关于javascript - React.js : Add component with value,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32137435/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com