小编MrB*_*afe的帖子

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

我正在尝试学习打字稿,说实话,我对此感到非常困惑。我知道这个问题之前已经被问过无数次了,但我一生都无法弄清楚如何将我正在阅读的答案翻译成我自己的代码。没有帮助的是,我似乎发现很多答案都使用与我一直使用的语法不同的语法来编写组件。无论如何,非常感谢任何帮助,因为我在这里完全迷失了。我实际上只有两个文件,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;

Run Code Online (Sandbox Code Playgroud)

在我的 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>
    );
}
Run Code Online (Sandbox Code Playgroud)

在 DisplayPerson.tsx 中,出现错误,提示“类型‘Person’上不存在属性‘person’”。我试图通过将我的 …

typescript reactjs react-props react-typescript

6
推荐指数
2
解决办法
2万
查看次数