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
の引数として先ほどのステータスが入るのでそれをアウトプット。