render props pattern
>#WIP
子がなんであるかを意識する必要がない
親にそういう責務をもたせたくない場合に使えばいい
普通に子に持った場合は、その子に渡すPropsを親が知っている必要が出てくる
使うべき点、指標をまとめておきたい
あるあるなのは
<List/> とかts<DataProvider render={data => (
<h1>Hello {data.target}</h1>
)}/>こういうやつ
Childrenに値を渡す
こういう親に対して、
tsconst Parent: React.FC<{ children: (value: boolean) => React.ReactNode }> = ({
children,
}) => {
const [value, setValue] = useState(false);
return (
<div>
{children(value)}
<button onClick={() => setValue(p => !p)}>click</button>
</div>
);
};こう使う
ts<Parent>
{value => <Child value={value} />
</Parent>