コンポーネントの特徴
- 親子関係
- 状態を持つ
親子関係
コンポーネントは、親子関係になっている。
例） Page => Header => LoginButton
Header.js
class Header extends Component {
render() {
return (
<div>
<LoginButton></LoginButton>
</div>
);
}
}
状態を持つ
コンポーネントは、自身の状態でDOMを書き換える
LoginButton.js
class LoginButton extends Component {
render() {
const msg = this.state.loggeIn ? "ログアウト" : "ログイン";
return (
<div>{ msg }</div>
);
}
}
React.jsでは
- props：親から渡される情報
- state：自Componentの状態
親から初期状態としてpropsを渡し、stateで自身の状態を管理する。
Case1
親から渡されたpropsで、振る舞いを変える。
例） 共通の振る舞いをするボタンで、表示するテキストを変えたい
Button.js
class Button extends Component {
render() {
return (
<div>{ this.props.text }</div>
);
}
}
parent.js
class Page extends Component {
render() {
return (
<LoginButton text="try Login" />
);
}
}
Case2
イベントを受け、自身のstateを変更する。
例） ボタンがクリックされたら、表示を変える
Count.js
class Button extends Component {
add() {
this.setState({ count: this.state.count + 1 } );
}
render() {
return (
<div>
{ this.state.count }
<button onClick={ () => this.add() } />
</div>
);
}
}
Case3
親から受け取ったpropsをstateの初期値とする。
CountButton.js
class CountButton extends Component {
constructor(props) {
this.state = { count: props.defaultCount };
}
render() {
return (
<div>
{ this.state.count }
<button onClick={ () => this.add() } />
</div>
);
}
}
parent.js
class Parent extends Component {
render() {
return <CountButton defaultCount={5} />
);
}
「コンポーネントを作る」とは
1. そのページの中で、どこをコンポーネントにするか決める
「サイドバー」があって、その中に「カード」があって、...
2. コンポーネントへのInput（props）を決める
- どこが共通化できるのか（コンポーネントのJSXにベタ書き）
- どこが汎化できるのか（親からpropsを渡す）
3. そのコンポーネントの状態（state）を考える
そのコンポーネントが、どういう状態を持つかを考える
例） フォローボタン
- フォロー済み/未フォロー