在 ReactJS 中通过 Prop 调用组件答案

【问题标题】：Calling a Component Via a Prop in ReactJS在 ReactJS 中通过 Prop 调用组件
【发布时间】：2019-10-31 09:37:18
【问题描述】：

我正在为使用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 属性上。

【问题讨论】：

【解决方案1】：

这个呢？

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

感谢您的示例。但是，要使这种方法起作用，我需要为我要使用的每个图标创建一个新的字典条目——Facebook、Youtube、MenuIcon、搜索图标等？有没有办法概括这一点，以便无论我传入哪个名称，它都会自动工作？
好吧，您可以将 Component 作为名称 prop 传递，并将其引用为图标组件内的 {props.name}。但是，如果您的限制是您想使用name="{string}"，那么我认为不会有其他方法。
如果你想使用String 作为你的道具，那么你必须使用字典。如果你传递了实际的组件，那么你不会。您还可以使用渲染道具模式。 <Icon render={(Component)=> <Component />} />都是一样的结果...
谢谢——最后，我选择了这个选项：export const Icon = props => <IconBase><props.name /></IconBase>;。我渲染如下：<Icon name={Facebook} />