Блог

Интерфейс реквизита с данными разных типов:

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

Cardview передаст данные реквизита соответствующему компоненту на основе 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>
    )
}
  

Компонент, получающий реквизит из Cardview:

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

Для того чтобы TypeScript понимал взаимосвязь между props.type и props.data , вам необходимо использовать различимый союз:

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