Edited at

React.js コンポーネント入門(props/state)

More than 3 years have passed since last update.


コンポーネントの特徴


  • 親子関係

  • 状態を持つ



親子関係

コンポーネントは、親子関係になっている。

例) 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

親から受け取ったpropsstateの初期値とする。


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)を考える

そのコンポーネントが、どういう状態を持つかを考える

例) フォローボタン


  • フォロー済み/未フォロー