Dynami c Импорт на основе this.props в React

Question

В моем приложении Next JS у меня есть node_modules (js файлы) для тем для определенных элементов на странице. Я хочу загрузить только нужные мне файлы на основе this.props.theme для компонента. Как / где мне это сделать в моем компоненте. В принципе, если у меня есть куча файлов для тем:

theme-red.js
theme-orange.js
theme-yellow.js
theme-green.js
theme-blue.js
theme-purple.js
theme-violet.js
theme-pink.js
theme-rainbow.js

В реквизитах я бы передал this.props.theme, а затем загрузил бы require(theme-${this.props.theme}.js)

Answer 1

Вы можете использовать функцию import:

const theme = await import (./{path-to-the-files}/theme-${this.props.theme}.js)

Было бы неплохо включить это в componentWillMount функция компонента.

https://nextjs.org/docs/advanced-features/dynamic-import
https://javascript.info/modules-dynamic-imports