javascript - 在 ReactJS 中通过 Prop 调用组件

Question

我正在为我使用导入的图标创建一个包装器组件react-icons。以下是它现在的外观示例：

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

<Icon>
 <Twitter />
<Icon>

现在，这就像我想要的那样工作——但我想简化代码。理想情况下，我希望它看起来/像这样工作：

<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道具的效果。

score 1 · Accepted Answer

我认为这样的事情会满足你的条件。

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

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

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

score 1 · Accepted Answer

那这个呢？

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

它超级简单灵活，不需要任何字典左右。

2 回答 2