Question

我在使用reactjs生成观看时遇到问题。我想要生成这两个视图。

var test1 = (
    <div id="container">
      <p>{initials}</p>
      <p>loggedin!</p>
    </div>
    );

var test2 = (
    <div id="container">
      <p>notloggedin</p>
    </div>
    );


var initials = "";
var isLoggedIn = false;

var Layout = React.createClass({
    componentWillMount: function() {
        try {
            if (window && window.User) {
                initials = window.User.name.first[0].toUpperCase() + window.User.name.last[0].toUpperCase();
                isLoggedIn = true;
            }
        } catch(e) {
            // ignore
        }
    },
    render: function () {
        if (isLoggedIn) {
            console.log(window.User);
            console.log(initials);
            return test1;
        } else {
            console.log("not logged in");
            return test2;
        }
    }
});

当我运行此代码时，我的终端和网络检查员有两个不同的输出。

终端：

[1] rendering server side react /
[1] not logged in

网络检查员：

Object {username: "bli1", userId: "1298085750", address: "127.0.0.1", name: Object, email: "Bradford_Li@gmail.com"…}

BL

上面显示了console.log(window.User)和console.log(initials)的第一个和第二个输出。我不确定为什么会这样。我不知道如何处理这个以达到理想的逻辑。

我的broswer上显示的视图是test2

的视图

我在浏览器上看到的内容最初是：

notloggedin

然后改为

loggedin!

浏览器上未显示{initials}对象。所有出现的内容都是文本loggedin!

之上的空格

终端和网络检查员的两个不同输出。渲染的视图不正确

0 个答案: