如何使用 typescript 在 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 中有几个小问题。我已将它们修复在此代码框中：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>
    );
}

1. 您的道具类型不正确。您应该使用 { person }: { person: Person } 而不是 { person }: Person。
2. 你应该用{} 包裹person.firstName 和person.lastName

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

Answer 2

您需要更正您的道具部分。所以你的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 3

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

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>
    );
}