Javascript 无法有条件地在另一个组件中要求组件

我正在尝试

require（）

（并呈现）两个组件中的一个，该组件取决于prop（

lang

）返回的值。因此，如果

props.lang

是

spanish

，它应该导入并呈现名为

的组件，否则，

：

---

注意：我不想导入所有组件，然后有条件地渲染它们。我只想导入需要渲染的内容。

为什么不简单地执行以下操作，例如：

const SpanishFlag = require('./svg-icons/flags/Spain');
const USFlag = require('./svg-icons/flags/UnitedStates');

然后，在图标按钮中使用三元运算符：

<IconButton disableFocusRipple disableRipple className={classes.root}>{ lang === 'spanish' ? SpanishFlag : USFlag}</IconButton>

{lang=='spanish'？SpanishFlag:USFlag}

您遇到的问题可能是由“导入”和“需要”之间的差异造成的

如果您的

标志/XXX

组件使用

导出默认值…

并且您希望使用

require

导入，则必须明确声明

默认值

符号

长话短说，试试：

const SpanishFlag = require('./svg-icons/flags/Spain').default;
const USFlag = require('./svg-icons/flags/UnitedStates').default;

或者更简单：

import SpahishFlag from './svg-icons/flags/Spain'

---

如果您的意图是只加载所需的标志，那么这不是方法。您可能想查看：-）

这是

/svg icons/flags/Spain

js文件吗？和实现图标？否则，

将无法工作是。如果我只是

从“/svg icons/flags/Spania”导入西班牙然后渲染
，它可以正常工作而不会打嗝。但是我需要根据
props.lang
的值使其动态化，因为这意味着要导入我想要避免的不必要的文件。我只想输入/需要需要的东西。性能。还有更多的组件。我列出了两个仅用于说明。：）下面的操作有效：`if（lang=='english'）{Flag=require（'./svg icons/flags/UnitedStates'）.default；}else if（lang=='西班牙语'）{Flag=require（'./svg icons/flags/Mexico'）。default；}`谢谢！
const SpanishFlag = require('./svg-icons/flags/Spain').default;
const USFlag = require('./svg-icons/flags/UnitedStates').default;

import SpahishFlag from './svg-icons/flags/Spain'