私はreactjsに新しいです。私はindex.jsに複数のコンポーネントを置くことができるかどうか疑問に思っていました

Question

私は別のセクションでWebページをやっているので、もっと多くのjsコンポーネントを作ろうとしています。正しい方法。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Pass from './Pass'; 
import Buds from './Buds'; 
import registerServiceWorker from './registerServiceWorker'; 



ReactDOM.render(
<Pass />, 
document.getElementById('passhubs'), 

<Buds />, 
document.getElementById('buds') 



); 
registerServiceWorker(); 

Answer 1

このようにする必要があります。 https://github.com/reactjs/react-redux/issues/355

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Pass from './Pass'; 
import Buds from './Buds'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render(
    <Pass />, 
    document.getElementById('passhubs') 
); 

ReactDOM.render(
    <Buds />, 
    document.getElementById('buds') 
); 
registerServiceWorker(); 

しかし、私はあなたが先に行くように簡単にアプリを行います単一のルート戦略を維持するために、次のように親コンポーネントの何かにBudsとPassコンポーネントをラップすることをお勧め。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render(
    <Parent />, 
    document.getElementById('parent-root') 
); 
registerServiceWorker(); 

Parent.js

import Pass from './Pass'; 
import Buds from './Buds'; 

class Parent extends React.Component{ 
    render() { 
     return(
      <div> 
      <div id="passhubs"> 
       <Pass /> 
      </div> 
      <div id="buds"> 
       <Buds /> 
      </div> 
      </div> 
     ) 
    } 
}