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 | Child Component not being rendered

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>
        );
    }
});

full working example

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

1 个答案: