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

【问题标题】：How can I post pass data without specifying each variable in Typescript如何在不指定 Typescript 中的每个变量的情况下发布传递数据
【发布时间】：2021-02-04 07:38:30
【问题描述】：

我有一个在组件中使用的接口，但是如何在不指定每个变量的情况下通过 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}
      />

【问题讨论】：

是的，您完全可以这样做，只需将道具类型更改为{ mainInfo: MainInfo }。或者只是传播用户对象，<UserCard {...User} />。

标签： javascript reactjs typescript interface

【解决方案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 ) => {

【讨论】：

我认为 props 类型属于组件，而不是模型。

【解决方案2】：

这不是 TypeScript 特定的。您正在寻找的是JSX spread attributes，它的工作方式如下：

<UserCard {...User} />

【讨论】：