Передача Generics в функциональный компонент React Typescript

Question

Мне просто было интересно, есть ли способ справиться с этим с помощью дженериков, чем использовать любой из следующих.

Я все еще пытаюсь обдумать типы и дженерики, просто хотел держаться подальше от используя любой. Или это будет приемлемый вариант использования любого!

SlotRenderer.tsx

// Can this be done ? 
interface SlotAProps<T> {
    slotData : T[]
}

// Should I stick with
interface SlotAProps {
    slotData : any[]
}

const SlotRenderer = (props: SlotAProps) => {
    return (
        <div>
            <p>Renders slot</p>
            // for version 1 I could do, currently this throws an error
            <p>{props.slotData[0]?.validity}</p>
            // for version 2 I could do, currently this throws an error
            <p>{props.slotData[0]?.totalPrice}</p>
        </div>
    )
}

Доступные типы:

interface SampleOne {
    id: number;
    name: string;
    validity: string;
    isVisible: boolean;
}

interface SampleTwo {
    id: number;
    required: true
    sampleString: string;
    totalPrice: number;
}

Выполнение будет

// Версия 1

const Container = () => {
    return (
        <ComponentBase
            // Passes a component to the Base component
            slot={<SlotRenderer<SampleOne> slotData={[{ id: 1, name:'', validity:'', isVisible:'' }]} />} 
        />
    )
}

// Версия 2

const ContainerTwo = () => {
    return (
        <ComponentBase
            // Passes a component to the Base component
            slot={<SlotRenderer<SampleTwo> slotData={[{ id: 1, required:true, sampleString:'', totalPrice:10 }]} />} 
        />
    )
}

Answer 1

Единственное, чего вам не хватало, так это добавления переменной типа к функции компонента:

const SlotRenderer = <T extends unknown>(props: SlotAProps<T>) => {
  // ...
}

Итак, причина, по которой вы не могли сделать это раньше, заключается в том, что вы правильно определили generi c props и знают синтаксис для использования компонентов generi c в tsx, но не знали, что вам понадобится эта дополнительная переменная типа, чтобы перенаправить ее на тип generi c props.

The extends unknown в приведенном выше примере - это хитрость, позволяющая включить параметр типа в функции стрелки в файлах .tsx, поскольку в противном случае синтаксис будет неоднозначным с открывающим тегом компонента.

Вы можете найти больше советов для работа с машинописным текстом + реакция в проекте React TypeScript Cheatsheet .