コンポーネント間のpropsの受け渡し - React入門

React入門」の前回はPropsついて解説を行いました。

今回はPropsのように状態を管理するStateについて解説を行います。

Stateとはコンポーネント利用時に設定ができる値で、Propsと違い後から変更ができます。

基本的にはコンポーネントの作成時にconstructorメソッド内でthis.stateオブジェクトに値を指定しておくことで、他のメソッドからthis.stateとして取得することが可能です。

//コンポーネントの作成
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myState1 : 'foo01',
      myState2 : 'foo02'
    };
  }
  render() {
    return (
      
myState1 : {this.state.myState1} myState2 : {this.state.myState2}
) } }; //コンポーネントの描画 ReactDOM.render( , document.getElementById('app') );

Propsの内容をStateに反映させたい場合は、constructorメソッドでは引数としてPropsを受け取ることができるので受け取った引数をそのままstateに代入することでStateの初期値としてPropsの内容を利用することができます。

//コンポーネントの作成
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myState : props.myProp
    };
  }

  render() {
    return (
      
myState : {this.state.myState}
) } }; //コンポーネントの描画 ReactDOM.render( , document.getElementById('app') )

StateはsetStateメソッドで更新を行うことができ、即座にrenderメソッドで描画されているHTMLに反映されます。
以下のサンプルでは1秒ごとにStateを更新するスクリプトを実行しており、Stateが変更されたタイミングで変更した内容がHTMLに反映されます。

//コンポーネントの作成
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 (
      
myState : {this.state.myState}
) } }; //コンポーネントの描画 ReactDOM.render( , document.getElementById('app') );

ReactではStateが変更されたタイミングでコンポーネントの再描画を行うので、UI変更に不要なプロパティはStateではなくPropsで管理したほうがよいでしょう。

次回はReactのイベントについて解説を行ないます。