Javascript 使用React，如何使用名称中的变量调用模块？

我正在使用这个React组件动态加载SVG图标。为什么不工作

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;

我得到以下错误：

---

模块构建失败：语法错误：意外标记13:22

完成此操作的最简单方法是将要包含的组件分配给变量，如下所示：

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;

---

@这和你上面的例子是一样的——为了简洁，我省略了所有的道具。道歉！谢谢，但这似乎不起作用-出错的preview.bundle.js:8906警告：该标记在此浏览器中无法识别。如果要呈现React组件，请以大写字母开头其名称。@anaprentice D'oh，对不起，这是我的错。修复了上面的示例代码。@anaprentice示例再次更新以包含PropTypes。这很简单：文档中也有类似的内容。为某人将来的参考添加。