javascript - 基于来自父级的道具反应动态导入

Question

是否可以根据 React 中 Parent 的道具动态导入？

对于我的代码：

家长

<Parent>
 <Child icon="svg1" />
 <Child icon="svg2" />
 <Child icon="svg3" />
</Parent>

孩子

import svg1 from './svg1.js'
import svg2 from './svg2.js'
import svg3 from './svg3.js'

switch (props.icon)
{
 case 'svg1':
   output = <svg1/>
   break
 case 'svg2':
   ouput = <svg2/>
   break
 default:
   ouput = <svg3/>
}

return (
 <div>
  {output}
 </div>
)

如何使用动态图标值根据父级而不是 swtich 的图标值导入 svg 元素？

标签： javascriptreactjs

Answer 1

如果您想避免进行切换，可以使用导入构建一个对象：

const icons = {
  svg1,
  svg2,
  svg3,
};

const Child = (props) => {
  const Component = icons[props.icon];
  return <Component />;
};