反应：传递的元素不实例化

Question

基本的 ReactJS 问题。我有以下 React 组件：

var TopLevelElement = React.createClass({
    render: function () {
        return (
            <Grouper top={Top} bottom={Bottom} />
        );
    }
});

var Grouper = React.createClass({
    render: function () {
        return (
            <div>
                <div className="top">{this.props.top}</div>
                <div className="bottom">{this.props.bottom}</div>
            </div>
        );
    }
});

Top 和 Bottom 是 React 组件，只有一个 render() 输出一些标记。

当我执行 React.render(<TopLevelElement />, el); 时，它只输出 Grouper 中的标记，而不是 Top 或 Bottom 中的标记。我已经确认这些元素独立运行良好。

看起来 children 根本没有被实例化。知道我做错了什么吗？

谢谢！

Answer 1

试试这个：

var TopLevelElement = React.createClass({
    render: function () {
        return (
            <Grouper top={<Top />} bottom={<Bottom />} />
        );
    }
});

反应：传递的元素不实例化

React: passed element doesn't instantiate

reactjs