タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

Reactに関するmarshiのブックマーク (4)

  • React で this.props.children に新しい Props を渡す - 無駄と文化

    React でカスタムコンポーネントを作るとき、コンポーネントの子要素には this.props.children でアクセスできます。 この this.props.children はそのままレンダリングすることもできるのですが、何かしらの Props を渡したくなったらどうするのでしょうか。 ざっくり調べた感じ Stack Overflow とか海外のブログにしか情報が無いようだったのでまとめてみます。 TL;DR いきなり結論から、 this.props.children に直接 Props を渡すことはできません。 代わりの方法として、React.cloneElement() で React要素をクローンする時に Props を渡すことができるので、this.props.children をクローンしつつ Props を渡せばいいようです。 デモを用意しました。 デモ ソース リポ

    React で this.props.children に新しい Props を渡す - 無駄と文化
    marshi
    marshi 2017/07/08
  • reduxとreact-routerの間でURLとstateの同期を行う - まさたか日記

    reactのルーティング機能?というかテンプレートシステムというか?にreact-routerがあります。リクエストパスに応じて画面構成要素を組み立てるのでreact-routerを使ってアプリケーションを作ると当然URLと画面は同期することができます。URLを直打ちしてもコードでURL遷移させても、適切な画面に切り替わるように作れるのです。 reduxはその際にどうかというと、URLや画面構成といったものについて素で働きかけるものではないので、URLが変化してもreduxのステートマシンにはその情報は反映されません。そこにはもう一つ上乗せするものが必要です。いくつか同じ守備領域のライブラリがあるようですが、わたしはここのところしばらく、中でも主流感のあるreact-router-reduxを用いています。 GitHub - reactjs/react-router-redux: Ruth

    reduxとreact-routerの間でURLとstateの同期を行う - まさたか日記
  • 【React-Redux】react-routerでルーティングを実装編 [初心者入門6日目] | Hirooooo’s Labo

    React × Reduxの連載記事の6回目です。 今回はページングの処理を実装していきたいと思います。 前回の状態からサンプルページをいくつか追加し、routerによるページングができるところまでが今回のゴールです。 React Redux環境でページング処理を行うために、今回はreact-router-domのモジュールを使って実装します。

    【React-Redux】react-routerでルーティングを実装編 [初心者入門6日目] | Hirooooo’s Labo
    marshi
    marshi 2017/05/21
  • reduxを試してみた(5日目) - ajaxを使ってUIを構築する(reduxにおける非同期の制御) - Qiita

    このページは作業ログです。やったことをつらつら書くだけなのでまとめません。あしからず。 対象読者 主に自分 今日のゴール jQueryではない方法を使ってajaxを使えるようになっていること Reactのコンポーネントを非同期リクエストで構築できるようになっていること モチベーション React.jsはビューのみをサポートしたライブラリ。サーバーとの通信部分はなんも用意していない チュートリアルではjQueryを使ってサーバーと通信してた。でもjQueryはその他もろもろいろいろ機能がある。Virtual DOMとの相性がありそうなので、jQuery自体導入せずに済ませられるのならそうしたい。 調べてみた A Comparison of JavaScript HTTP Libraries for the Browserという記事によると、Ajaxリクエストを実現するには下記の方法がある。

    reduxを試してみた(5日目) - ajaxを使ってUIを構築する(reduxにおける非同期の制御) - Qiita
  • 1