如何使用打字稿在 React 中将对象作为道具传递？

Question

我正在努力学习打字稿，老实说，我为此绞尽脑汁。我知道这个问题以前被问过无数次，但我终其一生都无法弄清楚如何将我正在阅读的答案翻译成我自己的代码。无济于事的是我发现的很多答案都使用了与我一直使用的不同的语法来编写组件。无论如何，非常感谢任何帮助，因为我完全迷失在这里。我实际上只有两个文件，App.tsx 和 DisplayPerson.tsx

在我的 App.tsx 文件中，我有以下代码：

import React from 'react';
import DisplayPerson from './components/DisplayPerson';

export interface Person {
    firstName: string;
    lastName: string;
}

function App() {
    const person1: Person = {
        firstName: 'fname',
        lastName: 'lname',
    };

    return (
        <div>
            <DisplayPerson person={person1} />
        </div>
    );
}

export default App;

在我的 DisplayPerson.tsx 文件中我有：

import React from 'react';
import { Person } from '../App';

export default function DisplayPerson({ person }: Person) {
    return (
        <div>
            <h1>person.firstName</h1>
            <h1>person.lastName</h1>
        </div>
    );
}

在 DisplayPerson.tsx 中我有一个错误提示“属性 'person' 在类型 'Person' 上不存在”。我试图通过将我的 Person 界面更改为：

来解决此问题

export interface Person {
    person : {
        firstName: string;
        lastName: string;
    }
}

我的 person1 const 声明为：

const person1: Person = {
        person: {
            firstName: 'fname',
            lastName: 'lname',
        },
    };

确实解决了 DisplayPerson.tsx 中的错误，但是我现在在 App.tsx 中遇到了一个错误，它显示“类型 'Person' 缺少类型 '{ firstName: string 中的以下属性; lastName: string;}': firstName, lastName。预期的类型来自属性 'person'，它在此处声明为类型 'IntrinsicAttributes & Person

这是我尝试用谷歌搜索我的问题的时候，坦率地说，即使不使用谷歌搜索，我也无法弄清楚问题出在哪里。非常感谢任何帮助，如果您也能解释为什么我所做的不起作用，我将非常感谢。

非常感谢！

Answer 1

您需要更正您的道具部分。所以你的 DisplayPerson.tsx 文件将是这样的

import React from 'react';
import { Person } from '../App';

interface IProps {
   person: Person
}
export default function DisplayPerson({ person }: IProps) {
    return (
        <div>
            <h1>{person.firstName}</h1>
            <h1>{person.lastName}</h1>
        </div>
    );
}

更新：

在 React 中，函数式组件的结构如下所示

function DisplayPerson(props) {}

正如您在此处看到的那样，props 是一个类型为 object 的参数。所以你需要传递一个object。现在你想要一个 person 作为对象内部的 key，这是对象解构。这就是为什么它必须像 Nathan 的回答中的 #1 那样完成。
你可以参考这个：https://javascript.info/destructuring-assignment#object-destructuring

Answer 2

我认为您在 DisplayPerson.tsx 中有几个小问题。我已将它们修复在这个 codesandbox 中：https://codesandbox.io/s/modest-snyder-s5bmt?file=/src/App.tsx

DisplayPerson.tsx:

import React from 'react';
import { Person } from '../App';

export default function DisplayPerson({ person }: { person: Person }) {
    return (
        <div>
            <h1>{person.firstName}</h1>
            <h1>{person.lastName}</h1>
        </div>
    );
}

您的道具类型不正确。而不是 { person }: Person 你应该 { person }: { person: Person }.
你应该用 {}

person.firstName

person.lastName

详细说明#1：传递给 DisplayPerson 的道具是一个对象，其中键是道具名称，值是传入的任何内容。因此，道具对象的类型不是 Person 而是一个键为 person 且值为 Person.

的对象

Answer 3

我发现了问题，您没有将参数作为 props 传递。你必须这样做，我已经解决了：

App.tsx

import React from 'react';
import DisplayPerson from './components/DisplayPerson';

export interface Person {
    firstName: string;
    lastName: string;
}

function App() {
    const person1: Person = {
        firstName: 'fname',
        lastName: 'lname',
    };

    return (
        <div>
            <DisplayPerson person={person1} />
        </div>
    );
}

export default App;

DisplayPerson.tsx

import React from 'react';
import { Person } from '../App';

export default function DisplayPerson(props:{person:Person}) {
    return (
        <div>
            <h1>props.person.firstName</h1>
            <h1>props.person.lastName</h1>
        </div>
    );
}

如何使用打字稿在 React 中将对象作为道具传递？

How to pass an object as a prop in React using typescript?

typescript

reactjs

react-props

react-typescript

更新：