React開発メモ: Component間のデータ管理
Component
Reactのアプリケーションは複数のComponentと呼ばれるJavascriptのクラスによって出来上がっている。データをこのComponent間で管理することはReactにおいて非常に重要だが少々複雑なので解説していきます。
親Componentから子Componentへのデータ渡し
親から子Componentへデータを渡すときはPropsを使う。例えばApp(親)というComponentからHeader(子)というComponentにアプリケーションのタイトルを渡す場合はこんな感じ:
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;
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に流す処理を追加します。
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;
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
の引数として先ほどのステータスが入るのでそれをアウトプット。
Author And Source
この問題について(React開発メモ: Component間のデータ管理), 我々は、より多くの情報をここで見つけました https://qiita.com/chochinanko/items/17fced8a6b373f231b81著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .