当道具在 React、Typescript 中可以有多种类型时，如何传递特定道具？

Question

Props Interface with data of different types:

interface ResultProp {
    type: string
    data: {} | AProp | BProp | CProp | DProp
}

Cardview will pass props data to respective component based on the props.type:

const Cardview:React.FC<ResultProp> = (props) => {
    const renderComponent = () => {
        switch(props.type){
            case "aprop":
                return <A {...props.data} />    // Type mismatch here
            // rest of the types ...
        }
    }
    return (
        <div className="cardview">
            {() => renderComponent}
        </div>
    )
}

Component receiving props from Cardview:

const A: React.FC<AProp> = (props) => {
    return (
        <div>
        </div>
    )
}

Answer 1

为了让 TypeScript 理解props.type和props.data之间的关系，你需要使用一个有区别的联合：

type ResultProp = {type: "aprop", data: AProp} | {type: "bprop", data: BProp} | ...;