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
2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

Reactノート2

参照

https://www.oreilly.co.jp/books/9784873117195/
https://www.to-r.net/media/

  • 親から子へ一方通行
  • コンポーネント(親から受け取ったプロパティを描画)
  • コンポーネントは「内部状態」を保つことができる(内部でのみ変更されうる値)

  • プロパティ(props)

  • 状態(state)

props

コンポーネントを作成するときに属性値として指定した値

  • コンポーネントが作成された後からpropsを変更することは非推奨。
  var surveys = [{title: 'Superheroes'}];
  <ListSurveys surveys={surveys} />

this.props

コンポーネントの中でプロパティの値にアクセス(参照)するにはthis.propsを使う。

index.js

  import React from 'react'
  import {render} from 'react-dom'

  class MyComponent extends React.Component {
    render() {
      return (
        <div>
          props1 : {this.props.myPropsName1}
          props2 : {this.props.myPropsName2}
        </div>
      )
    }
  };

  render(
    <MyComponent myPropsName1="myPropsValue1" myPropsName2="myPropsValue2" />,
    document.getElementById('root')
  );

Stateless Functions

  • 引数としてpropsが引き渡される
  • propsオブジェクトで利用可能
index.js

  import React from 'react'
  import {render} from 'react-dom'

  function MyComponent(props) {
    return (
      <div>
        props1 : {props.myPropsName1}
        props2 : {props.myPropsName2}
      </div>
    )
  };
  //コンポーネントの描画
  render(
    <MyComponent myPropsName1="myPropsValue1" myPropsName2="myPropsValue2" />,
    document.getElementById('root')
  );

JSXのスプレッドシンタックスを使う(一組のプロパティとして指定する場合)

index.js

  import React from 'react'
  import {render} from 'react-dom'

  function MyComponent(props) {
    return (
      <div>
        props1 : {props.myPropsName1}
        props2 : {props.myPropsName2}
      </div>
    )
  };

  const myProps = {
    myPropsName1 : 'myPropsValue1' ,
    myPropsName2 : 'myPropsValue2'
  }

  render(
    <MyComponent {...myProps} />,
    document.getElementById('root')
  );

defaultPropsを設定する

index.js

  import React from 'react'
  import {render} from 'react-dom'

  function MyComponent(props) {
    return (
      <div>
        props1 : {props.myPropsName1}
        props2 : {props.myPropsName2}
      </div>
    )
  };
  MyComponent.defaultProps = {
    myPropsName1: 'myPropsValue1' ,
    myPropsName2: 'myPropsValue2'
  };

  render(
    <MyComponent/>,
    document.getElementById('root')
  );

propTypes

  • 型指定


state

後から変更できる
コンポーネントの機能に直接必要な単純なデータのみをstateに持たせること
要素の表示内容を決定するために使用される

  • チェックボックスのチェックの有無により、オプションの表示/非表示

  • オプションのリストがドロップダウン表示されているかどうかを保持するための真偽値

  • 入力フィールドの値

constructorメソッド内でthis.stateオブジェクトに値を指定しておく
他のメソッドからthis.stateとして取得することが可能

index.js

  import React from 'react'
  import {render} from 'react-dom'

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        myState1 : 'foo01',
        myState2 : 'foo02'
      };
    }
    render() {
      return (
        <div>
          myState1 : {this.state.myState1}
          myState2 : {this.state.myState2}
        </div>
      )
    }
  };

  render(
    <MyComponent />,
    document.getElementById('root')
  );

setStateメソッドを使う(更新する)

index.js

  import React from 'react'
  import {render} from 'react-dom'


  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        myState : 1
      };
      //1秒ごとにStateを更新する
      setInterval(()=>{
        this.setState({
          myState : this.state.myState + 1
        });
      },1000);
    }

    render() {
      return (
        <div>
          myState : {this.state.myState}
        </div>
      )
    }
  };

  render(
    <MyComponent/>,
    document.getElementById('root')
  );

スクリーンショット 2017-02-23 13.11.17.png

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
2
Help us understand the problem. What are the problem?