你能导入一个已包含reactDOM渲染调用的文件吗？

Question

我有一个遗留的企业应用程序，它包含许多组件，这些组件被渲染到页面上的多个锚点。以下示例

modals.js

import etc
class MyModal extends Component {
  render() {
     return <span>a modal</span>
  }
}

var modals = $('.react__modal');
if (modals.length) {
   modals.each(function() {
      ReactDOM.render(<MyModal />,this);
   });
}

现在假设我有这个应用程序的多个区域，如admin.js，frontend.js，account.js，我可以导入modals.js在所有这些区域中包含的内容或者我必须导出该类，然后在每个中有多个声明我的ReactDOM.render我的领域。

我有大约100个这样的组件，我宁愿不必在所有区域复制渲染（总共6个）。

目前正在使用gulp进行编译，但是在转移到webpack的过程中（使用laravel mix）。

Answer 1

您可以尝试使用导出：

export default class MyModal extends Component

然后在其他组件中，您可以导入它并使用：

import MyModal from "./yourPathToComponent"