извлекая ReactDOM.render() вызывает в отдельный файл

Question

фон

Мои Реагировать приложение в настоящее время состоит из 3-х компонентов верхнего уровня; заголовок, параграф объяснения и само приложение, обертывающее кучу дочерних компонентов. Последняя часть прекрасна, каждый дочерний компонент извлекается в собственный файл и импортируется.

Теперь, в моем основном файле JavaScript, у меня есть эти три компонента, а затем внизу, у меня есть вызов ReactDOM.render(...) для каждого из них, что кажется немного неопрятным, особенно если позже добавить дополнительные компоненты.

Вопрос

Согласно современным стандартам, должны они быть извлечены в свои собственные файлы, и если да, то что лучше (или, по крайней мере, хороший) способ идти об этом?

Answer 1

В этом случае вы можете создать один основной компонент и заверните три других компоненты, и ваш код будет выглядеть следующим образом

var App = React.createClass({ 
    render: function() { 
    return <div> 
     <Header /> 
     <Paragraph /> 
     <Explanation /> 
    </div>; 
    } 
}); 

ReactDOM.render(<App />, document.getElementById('put here your root id')); 

Answer 2

использовать только одну точку входа для ReactDom.render

class App extends React.component { 

render(){ 
     <div> 
      <Header /> 
      <ParagraphExplanation /> 
     </div> 

} 

} 

ReactDOM.render(<App />, document.getElementById('id'));