Pass parameter to dynamic import react

Question

I'm writing a react app, with mobx and framework7, and using code splitting in some of my imports, and I haven't found anything on this, but i want to know if there's a way for me to use a variable inside a import, something like this code:

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>

Let Me Tink About It · Accepted Answer · 2019-08-27 00:49:53Z

2

You should just use normal import and pass parameters to your React component. Why not to do something like:

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;

and to use it in other file:

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

edited Aug 27, 2019 at 0:49

Let Me Tink About It

16.3k23 gold badges109 silver badges221 bronze badges

answered Jan 4, 2019 at 13:38

Łukasz Blaszyński

1,5651 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paula Castelan Over a year ago

Thanks for you answer! I was trying to avoid static imports, but i suppose it won't improve that much performance for this case.

Collectives™ on Stack Overflow

Pass parameter to dynamic import react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related