javascript - 使用 React，如何调用名称中带有变量的模块？

Question

我正在努力使用此 React 组件动态加载 SVG 图标。为什么不是 <MyIcon.icons[{name}] />在职的？

import React from 'react';
import PropTypes from 'prop-types';

import {
  IconHome,
  IconCow,
  IconDog,
} from '../Icon';


const MyIcon = ({
  name,
}) => (
  <div>
    <MyIcon.icons[{name}] />
    {name}
  </div>
);

MyIcon.icons = {
  home: IconHome,
  dog: IconCow,
  cow: IconDog,
};

MyIcon.propTypes = {
  name: PropTypes.string.isRequired,
};

export default MyIcon;

我收到以下错误:

Module build failed: SyntaxError: Unexpected token (13:22)

Answer 1

实现此目的的最简单方法是将要包含的组件分配给变量，如下所示:

import React from 'react';
import PropTypes from 'prop-types';

import {
  IconHome,
  IconCow,
  IconDog,
} from '../Icon';

const icons = {
  home: IconHome,
  dog: IconCow,
  cow: IconDog,
};

const MyIcon = ({ name }) => {
  const SelectedIcon = icons[name];
  return (
    <div>
      <SelectedIcon />
      {name}
    </div>
  )
};

MyIcon.propTypes = {
  name: PropTypes.string.isRequired,
};

export default MyIcon;