javascript - 如何在不指定 Typescript 中的每个变量的情况下发布传递数据

Question

我有一个在组件中使用的接口，但是如何在不指定每个变量的情况下通过 mainInfo = {User} 之类的一个道具传递所有这些数据。我不想在接口内完成所有数据的对象。用户是具有不同信息的对象。

界面

export interface MainInfo {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
  country: string;
  speaks: Languages[];
  learn: Languages[];
  isOnline: boolean;
  isFriend: number;
  photoUrl: string;
}

我使用接口的组件

import { MainInfo } from '../../interfaces/Interface';

export const UserCard: React.FC<MainInfo> = ( mainInfo ) => {

我如何传递道具

      <UserCard
        id={User.id}
        firstName={User.firstName}
        lastName={User.lastName}
        age={User.age}
        country={User.country}
        speaks={User.speaks}
        learn={User.learn}
        isOnline={User.isOnline}
        isFriend={User.isFriend}
        photoUrl={User.photoUrl}
      />

但我可以做这样的事情吗？

      <UserCard
        mainInfo={User}
      />

标签： javascriptreactjstypescriptinterface

Answer 1

   interface MainInfo {
      id: number;
      firstName: string;
      lastName: string;
      age: number;
      country: string;
      speaks: Languages[];
      learn: Languages[];
      isOnline: boolean;
      isFriend: number;
      photoUrl: string;
    }
    export interface IProps {
      mainInfo: MainInfo;
    }


import { IProps } from '../../interfaces/Interface';

export const UserCard: React.FC<IProps> = ( mainInfo ) => {