reactjs - 将 props 传递/绑定到以对象形式获得的 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;
    }
};

虽然我正在寻找一种更直观的方式。

标签： reactjs

Answer 1

映射函数而不是映射 React 节点：

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

然后用你的道具调用它：

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