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中输出。我已经确认这些元素可以独立工作。

看起来孩子们根本没有被实例化。知道我做错了吗？

谢谢！

Answer 1

请改为尝试：

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

React：传递的元素没有实例化

1 个答案: