如何正确地将打字稿接口从 React 父级传递到子级到孙子级

Question

Typescript 新手，正在学习将其整合到 React 中。我正在努力解决的问题是将道具与道具类型一起向下传递两层的正确方法是什么？您是否在每个组件中构建相同的界面？你是在父组件中导出接口，在子组件和孙子组件中都导入吗？还是您只在父项中定义接口而不在子项和孙子项中键入检查？我问这个问题是因为我试图将 5 个道具从父组件传递给孙子，并且觉得我要么必须在子组件中编写/导入大量接口，只是为了将其传递给我的孙子，但必须这样做再次在孙子中使用它。如果我的问题不清楚，请道歉。

例如，在这种情况下，我们如何将“somePropType”接口向下传递给孙子？

export function ParentComponent(){
interface somePropType {
    firstname: string;
    lastname: string;
}

const someProp: somePropType = {
    firstname: 'foo',
    lastname: 'bar'
}

return (
    <ChildComponent someProp={someProp}/>
)
}

export function ChildComponent({ someProp }){
    return (
        <GrandchildComponent someProp={someProp}/>
    )
}

export function GrandchildComponent({ someProp }){
    return (
        <div>{`${someProp.firstname} ${someProp.lastname}`}</div>
    )
}

Answer 1

我要做的是：

interface somePropType {
    firstname: string;
    lastname: string;
}
export function ParentComponent(){
    const someProp: somePropType = {
        firstname: 'foo',
        lastname: 'bar'
    }

    return (
        <ChildComponent someProp={someProp}/>
    )
}

interface ChildProps {
    someProp: somePropType
}
export function ChildComponent(props: ChildProps){
    const { someProp } = props
    return (
        <GrandchildComponent someProp={someProp}/>
    )
}

interface GrandchildProps {
    someProp: somePropType
}
export function GrandchildComponent(props: GrandchildProps){
    const { someProp } = props
    return (
        <div>{`${someProp.firstname} ${someProp.lastname}`}</div>
    )
}

基本上将道具类型传递给每个孩子。这样，VSCode 还将为您提供子组件的自动完成功能
对于每一个组件，最好为组件中的 props 提供一个接口