javascript - React.PropsWithChildren, `children` dışında başka prop olmayan?

Benim children dışında prop'u olmayan bir bileşenim var, yani:

function Foo({ children }: React.PropsWithChildren<>) {}

React.PropsWithChildren bir argüman gerektirir. Eğer React.PropsWithChildren<{}> yaparsam, Eslint ‘{}’ tür olarak kullanılmasın. ‘{}’ aslında “null olmayan herhangi bir değer” anlamına gelir. uyarısını verir.

Bunu boş nesne türü için kullanıyorum:

type EmptyObj = { [k: string]: never };

Ancak, React.PropsWithChildren<EmptyObj> şuna neden olur:

Type '{ children: Element; }' is not assignable to type 'EmptyObj'.
  Property 'children' is incompatible with index signature.
    Type 'Element' is not assignable to type 'never'.

React.PropsWithChildren'ye ne geçirmeliyim?

Düzenle:

Sadece şunu yapabileceğimi biliyorum:

function Foo({ children }: { children?: React.ReactNode }) {}

Ancak, kod tabanında React.PropsWithChildren kullanıyorum, bu yüzden tutarlı kalmayı tercih ederim.

Cevap #1

Ben de aynı durumdaydım ve şunu seçmeye karar verdim:

PropsWithChildren<unknown>

Güncelleme:

Aşağıdaki Jorrit'in yorumuna bakın, ancak React artık PropsWithChildren için bunu varsayılan yapıyor, ki bu şimdi type PropsWithChildren<P=unknown> ... olarak tanımlanmış durumda. Bu, aşağıdaki örneği basitleştirebileceğimiz anlamına geliyor:

const MyComponent = ({ children }: PropsWithChildren) => { /* ... */ }

Çocukları kabul eden bir bileşen ilan ediyoruz, ancak sahip olabileceği diğer özellikler hakkında bilmiyoruz (veya umursamıyoruz).

Örnek:

const MyComponent = ({ children }: PropsWithChildren<unknown>) => { /* ... */ }

// ...

<MyComponent>
  <span>children</span>
</MyComponent>

FC tipi neden değil?

FC türünün kullanımı önerilmemektedir. Bununla ilgili daha fazla bilgiyi bu PR'de okuyabilirsiniz: https://github.com/facebook/create-react-app/pull/8177

Cevap #2

Çözüm şudur:

function Foo({ children }: React.PropsWithChildren<Record<never, any>>) {}

Eğer eslint size any türü hakkında uyarı veriyorsa, onun yerine Record<never, never> kullanın.

İlgili makaleler