将道具传递/绑定到以对象形式获得的React组件

Question

我有以下对象：

const iconsMap = {
eye: <FaEye />,
database: <FaDatabase />,
reactjs: <FaReact />,
linkedin: <AiFillLinkedin />,
facebook: <AiFillFacebook />,
instagram: <AiFillInstagram />,
reddit: <AiFillRedditCircle />,
email: <AiOutlineMail />,
};

我想创建一个接受两个参数的函数：key和props，并且基于密钥，它通过扩展从函数中获得的props来返回上面的道具：

类似这样的东西：

export const getIcon = (iconName, props) => (<iconsMap[iconName] {...props }/>)

我发现的一种可能的方法是：

export const getIcon = (iconName, props) => {
switch (iconName) {
case iconsMap.eye:
return <FaEye {...props} />;
case iconsMap.database:
return <FaDatabase {...props} />;
case iconsMap.reactjs:
return <FaReact {...props} />;
case iconsMap.linkedin:
return <AiFillLinkedin {...props} />;
case iconsMap.facebook:
return <AiFillFacebook {...props} />;
case iconsMap.instagram:
return <AiFillInstagram {...props} />;
case iconsMap.reddit:
return <AiFillRedditCircle {...props} />;
case iconsMap.email:
return <AiOutlineMail {...props} />;
default:
return null;
}
};

尽管我正在寻找一种更直观的方式。

Answer 1

不是映射React Node，而是映射函数：

const iconsMap = {
eye: FaEye,
database: FaDatabase,
...
};

然后用你的道具调用它：

export const getIcon = (iconName, props) => {
// Should be capitalized
const Component = iconsMap[iconName];
return <Component {...props}/>
};