反应this.props.children没有被渲染

Question

我正在尝试将整个导航创建为我的webapp的组件(即页面的标题,导航和包装),如下所示:

const Navigation = React.createClass({
    render: function () {
        console.log(this.props.children);

        return (
            <div id="authenticated">
                <div id="header">...</div>
                <div id="left-menu">...</div>
                <div id="page">

                    {this.props.childen}

                </div>
            </div>
        );
    }
});

这就是我使用它Dashboard.jsx的方式:

import { Navigation } from '../../components'

const Dashboard = React.createClass({
    render: function () {
       return (
            <Navigation>
                <p>Hello</p>
            </Navigation>
        );
    }
});

它呈现组件(nav,header,...)但不呈现<p>hello</p>.控制台日志确实向我显示了<p>hello</p>作为反应对象,但它不会在页面上呈现它!

有任何想法吗？

PS:我已经看过了,这不是问题:React ES6 | 子组件未呈现

Answer 1

你this.props.childen应该得到一个错字 this.props.children

const Navigation = React.createClass({
    render: function () {
        return (
            <div id="authenticated">
                <div id="header">...</div>
                <div id="left-menu">...</div>
                <div id="page">
                    {this.props.children}
                </div>
            </div>
        );
    }
});

完整的工作范例