Reactのchildrenの型で子コンポーネントを制御する（したかった）

2022/06/28 5 users React children

反響がけっこうあったので、用途を深掘ってみようと思います。が、先に訂正があります。 ReactElement<Props>で特定のコンポーネントを指定できると思っていたのですが、色々試したところコンポーネントの指定までは難しいようでした。早とちりですいません。 JSXに書かれたコンポーネントはJSX.Elementとなるため、詳細... 続きを読む

Reactの 余白上手に スタイリング

2021/02/18 27 users React padding 余白 Flexbox stack

最近余白の実装について見直す機会があったので、考えをまとめてみました。 TL;DR Grid なら grid-gap flexbox なら flex-gap にしたい(が、safari が対応してないので記事執筆時点では使えない) 適切な padding を指定する 複数の同一のマージンには Stack、それ以外には Spacer コンポーネント 前提: 子コンポーネント... 続きを読む

エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA

2020/07/16 355 users ICS MEDIA Vue.js エラー Props CLI

Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @cli... 続きを読む

[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法 | Black Everyday Company

2017/10/29 120 users 図解 Black Everyday Company データ

引用:  Components#Composing Components - vue.js Vue.jsで親子コンポーネント間でのデータの受け渡しは、原則として Pass Props/Emit Events で行う。 親コンポーネントから子コンポーネントへデータを渡すときはPropsを使い、子コンポーネントから親コンポーネントへデータを渡すときはEmitでイベントを発火させる、ということらしい。 ... 続きを読む