Question

我正在使用mobx和framework7编写一个React应用，并在某些导入中使用code splitting，但是我还没有发现任何东西，但是我想知道我是否有办法在导入中使用变量，例如以下代码：

const Slider = import("../parts/Slider").then(Slider => {
        
  return (
    <Slider>
      {
        //sources would be an array of urls
        sources.map((source, i) => {
          return(
            <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>

Answer 1

您应该只使用常规的import并将参数传递给您的react组件，为什么不这样做：

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

const SliderComp = ({sources} => {
    return (<Slider>
      {
        //sources would be an array of urls
        sources.map((source, i) => {
          return(
            <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} />

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

1 个答案: