代码之家 › 专栏 › 技术社区 › shrikant.sharma

如何在React子组件中传递TypeScript接口对象作为道具

react-typescript typescript reactjs javascript

shrikant.sharma · 技术社区 · 1 年前

我正在学习反应和打字, 我需要将TypeScript接口对象从父组件传递到子组件,如果我删除TypeScript并在纯React中执行,它就可以工作。

TypeScript接口

export interface IUser {
  id: number;
  name: string;
  username: string;
  email: string;
}

父母.tsx

import { useEffect, useState } from "react";
import { IUser } from "./ApiInterface";
import Child from "./Child";
export default function App() {
  const [users, setUsers] = useState<IUser[]>();

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users`)
      .then((res) => res.json())
      .then((res) => setUsers(res as IUser[]));
  }, []);

  return <Child users={users} />;
}

儿童.tsx

import { IUser } from "./ApiInterface";

const Child: React.FunctionComponent<IUser[]> = (users: IUser[]): JSX.Element => {
  return (
    <div>
      {users.map((u, i) => (
        <h1 key={u.id}>{u.name}</h1>
      ))}
    </div>
  );
};
export default Child;

错误

ERROR in src/App.tsx:14:17
TS2322: Type '{ users: IUser[] | undefined; }' is not assignable to type 'IntrinsicAttributes & IUser[]'.
  Property 'users' does not exist on type 'IntrinsicAttributes & IUser[]'.
    12 |   }, []);
    13 |
  > 14 |   return <Child users={users} />;
       |                 ^^^^^
    15 | }
    16 |

1 回复 | 直到 1 年前

Pluto 1 年前

您的子组件使用了错误的类型。您正在使用 React.FC<IUser[]> 这意味着您的子组件需要一个 IUser 对象作为道具,但您传递的对象带有 users 包含的数组的属性 IUser公司 对象。

要解决此问题,您需要为子组件使用正确的类型,并为 用户 状态变量

例如:

// define correct type for child component
interface ChildProps {
  users: IUser[];
}

const Child: React.FC<ChildProps> = ({ users }: ChildProps): JSX.Element => {
  return (...);
};


// initialize state value
const [users, setUsers] = useState<IUser[]>([]);

您可以在此处看到整个示例: codesandbox.io