Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
131
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

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

by KeitaMoromizato
1 / 12

コンポーネントの特徴

  • 親子関係
  • 状態を持つ

親子関係

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

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

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

例) フォローボタン

  • フォロー済み/未フォロー
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
131
Help us understand the problem. What are the problem?