reactjs - TypeScript'te bir React bileşeninin 'key' özelliğine sahip olduğunu nasıl garanti ederim

Bir TypeScript değişkenini, key ayarlanmış bir bileşeni gerektirecek şekilde nasıl yazabilirim?

Böyle bir şey istiyorum:

const foo: ReactElementWithKey = <div key="some key"></div> 
// all ok

const bar: ReactElementWithKey = <div></div> 
// no `key` - typescript should show an error

ReactElementWithKey'i nasıl tanımlamalıyım?

Şu gibi bir şey denedim:

type ReactElementWithKey = React.ReactElement<{ key: React.Key }>;

Ama işe yaramıyor - key olmayan bileşenler sorunsuz bir şekilde kabul ediliyor.

Cevap #1

Deneyebileceğiniz bir şey, <div> bileşeninin özel bir sürümünü kullanmaktır, şöyle:

import React from 'react';

// required non-null key prop
interface WithKeyProps {
    key: React.Key;
}

// custom div wrapper
const DivWithKey = (props: React.HTMLAttributes<HTMLDivElement> & WithKeyProps) => {
    return (
        <div {...props}>
            {props.children}
        </div>
    );
}

const foo = <DivWithKey key='' />;
// all ok
const bar = <DivWithKey />;
// no `key` - typescript shows an error

Oyun Alanı Bağlantısı

Sorun şu ki bu sadece <div>ler için geçerli, bu yüzden bu tam olarak işe yaramayabilir.

Cevap #2

Yapamazsın.

Öncelikle, render edilmiş tüm React bileşenleri sadece JSX.Element türündedir. Render edildiğinde render edilen hakkında tüm tür bilgisi kaybolur. Bu yüzden bir değişkeni yalnızca bazı render edilmiş React bileşenlerini kabul edecek şekilde türleyemezsiniz.

İkincisi, key React tarafından ayrılmış bir özelliktir. Her bileşen bunu isteğe bağlı olarak kabul eder.

Tam olarak ne yapmaya çalıştığından emin değilim, ama muhtemelen daha iyi bir yol vardır.

İlgili makaleler