Question

我的项目中有一个“ index.html”文件，我想从该index.html文件中调用多个React组件。

通常，我们使用jsx文件中的getElementbyId从index.html文件中调用index.jsx。但是在这里，我需要在index.html本身中调用2个不同的组件。

index.html

   <div class="firstComponent"> </div>
   <div id="root" aria-live="polite"></div>
   <div class="secondComponent"> </div>

我想从第一个和最后一个div调用组件firstComponent.jsx和secondComponent.jsx。有什么办法可以实现？

Answer 1

这可以通过对两个节点使用多个ReactDOM.render调用轻松完成。

import React from 'react';
import ReactDOM from 'react-dom';

import FirstComponent from 'path-of-your-firstComponent.jsx';
import SecondComponent from 'path-pf-your-secondComponent.jsx';

ReactDOM.render(
  <FirstComponent />,
  document.getElementsByClassName('firstComponent')[0]
);

ReactDOM.render(
  <SecondComponent />,
  document.getElementsByClassName('secondComponent')[0]
);

从“ index.html”调用多个React组件

1 个答案: