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

  • 21
    いいね
  • 1
    コメント

コンポーネントの特徴

  • 親子関係
  • 状態を持つ

親子関係

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

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

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

例) フォローボタン

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