多个嵌套组件

Question

我想在我的内容上制作一个包装器，以便我可以在那里使用一些常规事件。所以它看起来像这样：

var Table = React.createClass({

    render: function () {
        return (
            React.createElement('div', {},
                React.createElement('div', {className: 'TableDiv'}, 'Table div - click me')
            )
        );
    }

});

var NestedData = React.createClass({

    render: function () {
        return React.createElement('div', {},
            React.createElement('div', {className: 'NestedDiv'}, 'Nested data div - click me')
        )
    }

});

var App = React.createClass({

    render: function () {
        return React.createElement(Table, {},
            React.createElement(NestedData)
        )
    }

});

window.onload = function () {
    ReactDOM.render(React.createElement(App), document.getElementById('content'));
};

问题是没有显示嵌套的div，只有Table类的包装器。我该怎么做？

Answer 1

从渲染功能返回时使用括号

var NestedData = React.createClass({

render: function () {
    return ( 
        React.createElement('div', {},
        React.createElement('div', {className: 'NestedDiv'}, 'Nested data div - click me')
    )
  );
}

});