在 ReactJS 中通过 Prop 调用组件

Question

我正在为使用 react-icons 导入的图标创建包装器组件。这是它现在的样子的一个例子：

import { FaTwitter as Twitter} from 'react-icons/fa'
import { Icon } from './elements 

<Icon>
 <Twitter />
<Icon>

现在，这就像我想要的那样工作了 -- 但我想简化代码。理想情况下，我希望它像这样 look/work：

<Icon name='twitter' />

知道怎么做吗？

注意： 如果有帮助，这里是我的 Icon 组件的当前代码：

export const Icon = props => <IconBase {...props} />

<IconBase> 组件只是 styled-components 中的一些样式。

更新

我只想指出，Twitter 示例只是一个示例。我正在寻找一种解决方案，无论我将什么名称传递给 <Icon> 组件，它都可以工作。因此，换句话说，以下所有（以及更多）都将起作用：

<Icon name="Facebook" />
<Icon name="Search" />
<Icon name="Menu" />

其中每一个都等同于：

<Icon><Facebook /></Icon>
<Icon><Search /></Icon>
<Icon><Menu /></Icon>

换句话说，无论我从 react-icons 中提取什么图标，它都会正确呈现相对于 name prop.

Answer 1

我想这样的东西可以满足你的条件。

const App = () => <Icon name="twitter" />;

const dict = { twitter: <Twitter /> };

const Icon = ({ name }) => <IconBase>{dict[name]}</IconBase>;

Answer 2

这个呢？

// definition:
const Icon = (props) => <SomeIconWrapper><props.glyph /></SomeIconWrapper>;
// usage:
<Icon glyph={Twitter} />

超级简单灵活，不需要什么字典什么的。

Calling a Component Via a Prop in ReactJS