Question

我试图制作更多的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>
       )
    }
}

我是reactjs的新手，我想知道我是否可以在index.js中放入多个组件

1 个答案: