在打字稿组件变量中使用 json 对象值？

Question

我对使用打字稿还很陌生，但我遇到了一种我不知道如何解决的情况。我正在尝试获取我在我的 React 打字稿项目中拥有的一些静态 json 数据，并将其用作语义 ui 组件变量值。

我有一个名为 socials.ts 的文件保存在 data/ 目录中，看起来像

export const socials = [
  {
     "id":1,
     "media": "github"
     ...
  ...}
]

然后我有另一个组件 SocialsLinks.tsx，它假设将图标显示为社交对象中每个值的 link。

...
import {socials } from "data/socials"
import { Icon } from "semantic-ui-react";

export const Socials = () => {
  return (
    <>
      {socials.map((social) => (
        <a
          key={social.id}
          href={`https://${social.media}.com/${social.username}`}
        >
          <Icon name={ social.media }/>
        </a>
      ))}
    </>
  );
};

显然 <Icon name={ social.media }/> 会抛出类型错误，因为字符串 social.media 的类型为 any，而 Icon 只接受定义的语义 UI 字符串。

我想知道是否有办法将 social.media 字符串转换为语义 UI 字符串？或者为原始 json 对象定义类型，使其像这样工作？

Answer 1

试试这个方法，

我已经创建了一个 interface 作为记录。

    import * as React from "react";
    import "./styles.css";
    
    import { Icon } from "semantic-ui-react";
    import { SemanticICONS } from "semantic-ui-react/dist/commonjs/generic";
    
    interface Social {
      id: number; 
      username: string; 
      media: SemanticICONS;
    }
    
    export const App = () => {
      
      const socials: Social[] = [
        {
           "id":1,
           "media": 'github',
            username: 'james'
        }
      ]
      return (
        <>
          {socials.map((social: Social) => (
            <a
              key={social.id}
              href={`https://${social.media}.com/${social.username}`}
            >
              <Icon name={ social.media }/>
            </a>
          ))}
        </>
      );
    };

希望这就是您要找的。

在打字稿组件变量中使用 json 对象值？

Using json object values in typescript component variable?

json

dictionary

typescript

reactjs

semantic-ui-react