React.js：添加具有价值的组件

Question

刚开始学习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（）函数吗？ 如果是这样，怎么办？

Answer 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用于更复杂的实现。