在服务器和客户端

Question

我正在第一次尝试在客户端和服务器上进行渲染，然后点击了我的第一个障碍。我有一个登录/退出元素我需要有条件地显示（显然，取决于用户是否登录）。这是我之前成功使用的一种技术，但现在我正专注于服务器渲染，我收到了这个错误。

有什么建议吗？

P.S。 - 尽管我不确定如何解决这个问题，但我不得不说React团队在彻底的错误/警告消息传递方面做了如此出色的工作。 BRAVO！

JS：

import React from 'react';
import styles from './Header.scss';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';
import Navigation from '../Navigation';

import firebaseUtils from '../../utils/firebaseUtils';

@withStyles(styles)
class Header extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            loggedIn: firebaseUtils.isLoggedIn()
        };
    }

    render() {
        return (
            <header className="Header">
                <div className="Header__container">
                    <hgroup className="Header__hgroup">
                        <h1 className="Header__h1">And Scene</h1>
                        <h2 className="Header__h2">Watch movies together, apart.</h2>
                    </hgroup>
                    <nav className="Header__nav">
                        {(() => {
                            if (this.state.loggedIn)
                                return <div><a href="/login" onClick={Link.handleClick}>Log&nbsp;out</a></div>;
                            else
                                return <div><a href="/login" onClick={Link.handleClick}>Log&nbsp;in</a> or <a href="/signup" onClick={Link.handleClick}>Sign&nbsp;up</a></div>;
                        })()}
                    </nav>
                </div>
            </header>
        );
    }

    componentWillMount() {
        firebaseUtils.onChange = this.handleLogout;
    }

}

export default Header;

错误：

  

警告：React尝试在容器中重用标记，但是   校验和无效。这通常意味着您正在使用服务器   渲染和服务器上生成的标记不是什么   客户期待。反应注入新的标记以补偿哪个   但是你失去了服务器渲染的许多好处。   相反，弄清楚为什么生成的标记是不同的   客户端或服务器:(客户端）0.0.1.0.0“＆gt;注销＆lt;   （服务器）0.0.1.0.0“＆gt;登录＆lt; / a＆gt;＆lt; span data-rea

似乎与isLoggedIn()函数有关：

var Firebase = require('firebase');
var forge = "https://and-scene-app.firebaseio.com/";
var ref = new Firebase(forge);
var cachedUser = null;

var formatEmailForFirebase =  function (email) {
    var key = email.replace('@', '^');
    if (key.indexOf('.') !== -1) {
        return key.split('.').join('*');
    }
    return key;
};

var addNewUserToFB = function (newUser) {
    var key = formatEmailForFirebase(newUser.email);
    ref.child('user').child(key).set(newUser);
};

var firebaseUtils = {
    createUser: function (user, cb) {
        ref.createUser(user, function (err) {
            if (err) {
                switch (err.code) {
                    case "EMAIL_TAKEN":
                        console.log("The new user account cannot be created because the email is already in use.");
                        break;
                    case "INVALID_EMAIL":
                        console.log("The specified email is not a valid email.");
                        break;
                    default:
                        console.log("Error creating user:", err);
                }
            } else {
                    this.loginWithPW(user, function (authData) {
                        addNewUserToFB({
                            email: user.email,
                            uid: authData.uid,
                            token: authData.token
                        });
                    }, cb);
            }
        }.bind(this));
    },
    loginWithPW: function (userObj, cb, cbOnRegister) {
        ref.authWithPassword(userObj, function (err, authData) {
            if (err) {
                console.log('Error on login:', err.message);
                cbOnRegister && cbOnRegister(false);
            } else {
                authData.email = userObj.email;
                cachedUser = authData;
                cb(authData);
                this.onChange(true);
                cbOnRegister && cbOnRegister(true);
            }
        }.bind(this));
    },
    isLoggedIn: function () {
        return cachedUser && true || ref.getAuth() || false;
    },
    logout: function () {
        ref.unauth();
        cachedUser = null;
        this.onChange(false);
    }
};

module.exports = firebaseUtils;