Component

Reactのアプリケーションは複数のComponentと呼ばれるJavascriptのクラスによって出来上がっている。データをこのComponent間で管理することはReactにおいて非常に重要だが少々複雑なので解説していきます。

親Componentから子Componentへのデータ渡し

親から子Componentへデータを渡すときはPropsを使う。例えばApp（親）というComponentからHeader（子）というComponentにアプリケーションのタイトルを渡す場合はこんな感じ：

App.js

import React, {Component} from 'react';
import Header from './Header';

class App extends Component {

    constructor() {
        super();
        this.name = 'MyApp';
    }

    render() {
        return (
            <div>
                <Header title={this.name} />
            </div>
        )
    }
}
export default App;

Header.js

import React, {Component} from 'react';

class Header extends Component {

    render() {
        return (
            <div>
                <h1>Welcome to {this.props.title}</h1>
            </div>
        )
    }
}
export default Header;

親から子へデータをプロパティーとして渡すことによって子はthis.propsでそのデータを拾えるというわけだ。

子Componentから親Componentへのデータ渡し

先ほどの親から子へのデータ渡しはいたってシンプルだったがその逆は少々ややこしい。やり方はいくつかあるみたいですが今回はCallbackを使います。先ほどのAppとHeaderを使って今度はHeaderの情報をAppに流す処理を追加します。

Header.js

import React, {Component} from 'react';

class Header extends Component {

    componentDidMount() {
        let message = 'Header mounted successfully';
        this.props.childStatus(message);
    }

    render() {
        return (
            <div>
                <h1>Welcome to {this.props.title}</h1>
            </div>
        )
    }
}
export default Header;

App.js

import React, {Component} from 'react';
import Header from './Header';

class App extends Component {

    constructor() {
        super();
        this.name = 'MyApp';
    }

    logChildStatus(message) {
        console.log(message);
    }

    render() {
        return (
            <div>
                <Header childStatus={this.logChildStatus} title={this.name} />
            </div>
        )
    }
}
export default App;

まずHeaderがマウントに成功した場合、成功したというステータスをthis.props.childStatusの引数として渡す。AppではchildStatusに対してlogChildStatusというCallback関数を用意しておく。logChildStatusの引数として先ほどのステータスが入るのでそれをアウトプット。