pocka流Reactコンポーネントの書き方ベストプラクティス
概要 普段プライベート/仕事共に React を書くことが多いのですが、その中で得た知見や経験則といったものを、他の人のコードレビュー時や設計時に上手く伝えられないケースが多々ありました。また、他の人がどういった書き方をしているか、ということを知るのは引き出しの幅を広げたり意外な発見ができたりします。 そのため、これまでの自分の経験を元にした自己流ベストプラクティスを共有したいと思います。 なお、メモ的な役割があったり、感覚的な部分もあるのであまりまとまった文章になっていないです。 これらはあくまでも個人的なベストプラクティスであり全ての開発者/プロジェクトに当てはまるとは限りません。 全て TypeScript 導入を前提としています。 スタイリング可能なコンポーネント 原則全てのコンポーネントがclassNameとstyleを受け取り、最も外側にある要素に受け渡すようにします。これによ
React+TypeScriptでPropsを継承する
やりたいこと React でよくあるパターンとして、親コンポーネントの Props の一部 or 全部を子コンポーネントに渡す、というものがあります。 // Fooが受け取ったbaz以外のpropsをBarに渡す const Foo = ({ baz, ...rest }) => <Bar {...rest} /> // Quxが受け取ったbaz以外のpropsをdivに渡す const Qux = ({ baz, ...rest }) => <div {...rest} /> これを TypeScript で書く、というのがこの記事の目的です。 コンポーネントに渡す場合 extendsまたは Intersection Type を使います。 import { SFC } from 'react' interface FooProps { hoge: string fuga: number
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
