useStateのセッタを子コンポーネントに渡すときの受け取り側での型付け
結論
僕はこのように型付けしました
parent.tsx
const Parent = () => {
const [value, setValue] = useState(0);
return (
<div>
<Child setValue={(newvalue) => {setValue(newValue)}}>
</div>
)
}
child.tsx
type ChildProps = {
setValue: (newState: number) => void
}
const Child: FC<ChildProps> = ({ setValue }) => {
// ========
// 何かしらの処理
// ========
}
別のパターン
parent.tsx
const Parent = () => {
const [value, setValue] = useState(0);
return (
<div>
<Child setValue={setValue}>
</div>
)
}
child.tsx
type ChildProps = {
setValue: Dispatch<SetStateAction<number>>
}
const Child: FC<ChildProps> = ({ setValue }) => {
// ========
// 何かしらの処理
// ========
}
上記のパターンにしない理由
CSF3.0の書き方でChild.tsxに対してChild.stories.tsxを作成するときに、かなり困りました。
Child.stories.tsx
export default {
component: Child,
} as Meta;
type Story = StoryObj<typeof Child>;
export const Template:Story = {
args:{}
}
このように引数のパターンを様々書けるようになったCSF3.0なのですが、引数にsetValueを渡したいときに、すぐに最適解が出てきませんでした。
何かしらいい方法があれば教えていただきたいです。
0