如何使用 typescript 在 React 中将对象作为 prop 传递？

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该对象内部的对象，即对象解构。这就是为什么它必须像内森的答案中的#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>
    );
}

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

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