[B! react] morygonzalezのブックマーク

[フロントエンド] React Routerで、子要素でもhistory.pushを使いたい（withRouterの利用） - YoheiM .NET

こんにちは、@yoheiMuneです。 React.jsの任意のコンポーネントから、React Routerのmatch、location、historyを使えるようにする方法を、ブログに書きたいと思います。目次対象のバージョン React Routerのバージョンは、v4以降が対象です。v3以前とはかなり違うので、対象バージョンにご注意ください。何が問題か例えば、以下のルーティングがあるとします。 import React, { Component } from 'react' import { BrowserRouter as Router, Route, Switch } from "react-router-dom" import Thread from './Thread' import Todo from './Todo' class AppRouter extends

morygonzalez 2019/11/04

react

リンク

React Router v4 でルーティング先の component に Props を渡す方法 - ngzmのブログ

「React Router v4 でルーティング先の component に Props を渡す方法」について調査したので記事にします。基本的なReact Router v4 の基本的なルーティング React Router v4 の基本的なルーティングは次のような感じでコーディングします。 import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render(( <BrowserRouter> <AppFrame /> </BrowserRouter> ), document.getElementById('root'), ); class AppFrame extends Component { ren

morygonzalez 2019/08/28

react

リンク

Reactjs - How to pass values from child component to grand-parent component?

morygonzalez 2019/08/28

react

リンク

Reactコンポーネントを外から操作したい - MOL

最近、Reactを触っているのだけど、Reactコンポーネント外から任意のReactコンポーネントを操作したい事情に駆られた（何を言ってるのか分からねぇと思うが俺も（ｒｙ）。 export default class Hoge extends Component { constructor(props) { super(props); this.state = { text: '' }; this.handleClick = this.handleClick.bind(this); } handleClick(e) { this.setState({ text: 'unko' }); } render() { ... } } 普通のケースだと、こんな感じでHogeのコンポーネントのどっかをクリックしたら、stateのtextにunkoをセットすることによって、renderがはしるみたいな、