将参数传递给动态导入反应答案

【问题标题】：Pass parameter to dynamic import react将参数传递给动态导入反应
【发布时间】：2019-08-27 08:56:34
【问题描述】：

我正在编写一个带有 mobx 和 framework7 的反应应用程序，并在我的一些导入中使用 code splitting，我还没有找到任何关于此的内容，但我想知道是否有办法让我使用导入中的变量，类似于以下代码：

const Slider = import("../parts/Slider").then( Slider =>
    <Slider>
      {
        //sources would be an array of urls
        sources.map( (source, i,) =>
          <div className="slider" key={i}  style={{position:'relative'}}>
            <img className="picture" src={source} alt=""/>
          </div>
        )
      }
    </Slider>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您应该只使用正常的导入并将参数传递给您的 React 组件。为什么不这样做：

import Slider from "../parts/Slider";

const SliderComp = ( {sources}, ) =>
    <Slider>
      {
        //sources would be an array of urls
        sources.map( (source, i,) => 
          <div className="slider" key={i}  style={{position:'relative'}}>
            <img className="picture" src={source} alt=""/>
          </div>
        )
      }
    </Slider>

export default SliderComp;

并在其他文件中使用它：

import Slider from './SliderComp'
...
<Slider sources={arrayOfSources} />

【讨论】：

感谢您的回答！我试图避免静态导入，但我想在这种情况下它不会提高那么多性能。