typescript  react 
 0001-01-01

childrenに引数渡したい時、render propを使えばできる。 functional componentでのやり方がわからなくていろいろハマったのでメモ

https://reactjs.org/docs/render-props.html

結論


// children
interface ChildrenSampleProps {
    userName: string
}
const ChildrenSample: React.FC<ChildrenSampleProps> = ({ userName }) => {
    return <>user: {userName}</>
}

// parent
interface ParentProps {
    children: (props: ChildrenSampleProps) => JSX.Element
}
const Parent: React.FC<ParentProps> = ({ children }) => {
    const userName = 'user!!!'
    return <>{children({ userName })}</>
}

// sample to use
const Sample: React.FC = () => {
    return (
        <Parent>
            {(props) => <ChildrenSample {...props} />}
        </Parent>
    );
}

childrenの型をchildren: (props: ChildrenSampleProps) => JSX.Elementのようにするといける

See Also