使い道のなさそうな条件レンダー React Components
色々やろうとして中間生成物として生まれた
これやるなら普通に hoge && <Some /> で良い
code:tsx
const RenderIf = <T extends (props: Parameters<T>0) => JSX.Element, S extends keyof Parameters<T>0>({ renderIf,
render,
}: {
renderIf: boolean
render: (_props: Omit<Parameters<T>0, S> & { P in S: NonNullable<Parameters<T>0P> }) => ReturnType<T> }) => {
if (!renderIf) return null
return <>{render}</>
}
こうやって使う
code:tsx
const Some = () => {
const data: string | undefined = 'text'
const loading = false
return (
<RenderIf<typeof Hoge, 'text'>
renderIf={!loading}
render={({ text, text2 }) => <Hoge text={text} text2={text2} />}
/>
)
}
const Hoge = ({ text, text2 }: { text: string; text2: string }) => {
return (
<div>
{text} {text2}
</div>
)
}