Mehrere verschachtelte Komponenten

Question

Ich möchte einen Wrapper für meine Inhalte erstellen, damit ich einige allgemeine Ereignisse darin verwenden kann. So würde es so aussehen:

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

Das Problem ist, dass die verschachtelte div nicht angezeigt wird, nur die Tabellenklasse wraper. Wie soll ich das machen?

Answer 1

Verwenden Klammer während der Rückkehr aus dem Render-Funktion

var NestedData = React.createClass({ 

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

});