React 组件渲染子组件

Question

我的代码有些问题：

1 在这种情况下标题不显示

import React from 'react';
import {Link} from 'react-router';

import CurrentUser from './../services/current-user.js';
import HeaderWithoutLogin from './header-without-login.js';
import HeaderWithLogin from './header-with-login.js';

let Header = React.createClass({
    render: () => {
        var Child = CurrentUser.isLoggedIn()
            ? HeaderWithLogin
            : HeaderWithoutLogin;
        return <div>{Child}</div>;
    }
});

export default Header;

2 在这种情况下我得到一个错误：“无法读取未定义的属性'状态'”

import React from 'react';
import {Link} from 'react-router';

import CurrentUser from './../services/current-user.js';
import HeaderWithoutLogin from './header-without-login.js';
import HeaderWithLogin from './header-with-login.js';

let Header = React.createClass({
    render: () => {
        if (CurrentUser.isLoggedIn()) {
            return <HeaderWithLogin/>;
        }
        return <HeaderWithoutLogin/>;
    }
});

export default Header;

我需要如何使用我的逻辑？我的意思是返回并针对该声明提出不同的看法

Answer 1

HeaderWithLogin 中的 render 方法不正确。

render: () => {}

将尝试将this 绑定到与您期望的完全不同的东西，这将产生undefined。

改成这个就行了。

render() {}

或 ES5 等价物

render: function () {}