React.jsの基礎 | state・propsについて

LiSMO techの小谷です。 

今回はReact.jsのstate・propsについてです！React.jsについては以前以下のような記事も書いたので、参考にしてみて下さい。

【React.js】クラスコンポーネントと関数コンポーネントの書き方について

コンポーネント

state・propsについての前に簡単にコンポーネントについてです。

コンポーネントは、component(部品)とあるように、画面で使用される部品のことです。大体は1つのjsファイルで、import可能になった一つdomのかたまりとなっています。

React.jsに限らずVue.jsなどでも同じような意味合いで使いますね。

State

Stateは、コンポーネントの状態を示すものです。変更可能で、変更するとdom(要素)もかわります。

また、stateの値に直接代入することで値を変更していてはいけません。

どういうことかと言うと、

 handleChange(event) {
    // ↓とかしたらダメ！
    this.state.value ＝ event.target.value;
  }

  render() {
    return (
      

        
      
    );
  }

といった具合にstateのあたいを直接代入して、変更してはダメです。

正しくは、

・クラスコンポーネントの場合はsetStateを使う

・関数コンポーネントの場合はuseStateで定義した関数を使う

このようにstateは変更しましょう。

Props

Propsは、親コンポーネントから子コンポーネントへ渡すデータのことです。子コンポーネントの方でpropsの値を変更することはしてはなりません。

引数のイメージしてもらうといいかもしれません。

また、Propsでわたす値は、文字列・数値・真偽値・オブジェクト・関数・DOMとなんでも大丈夫です。

簡単にstateとpropsを図にすると以下のような感じです。

子から親コンポーネントにデータを渡すには？

ここまで親コンポーネントから子コンポーネントにデータはpropsで渡せると書きましたが、逆に子コンポーネントから親コンポーネントにデータを渡せるか疑問に思う方もいるかもしれません。

結論を先にいうと渡せます！

方法としては、親の関数を子コンポーネントで呼ぶ形になります。

イメージは以下のようなものになります。

Vue.jsになれている方は$emitにあたるものだなと思って下さい。

実際にコードを書くと以下のようなものになると思います。

// 親コンポーネント側
import Input from './Input';

function App() { 
  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
      

        
      

    );
  }
}

// 子コンポーネント側
function Input(props) { 
  render() {
    return (
      
    );
  }
}

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。

企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

お得な情報がLINEに届く！！

LINE公式アカウントはこちらから。