6. Event - (1)

リストをクリックして、リストのテキスト内容をHTMLの下部に出力します.
アプリケーション・コンポーネントのステータス変更、コンポーネントのステータス値の変更、およびアプリケーションの動的変更を実現します.
✔SubjectファイルとContentファイルを分離する->Subject.js/Content.js
✔componentsフォルダに挿入
現在のページがwelcomeページかraedページかを区別するために、
this.state={mode:[welcome]}デフォルト値を挿入
また、モードがwelcomeの場合に指定したテキストも挿入します.

state値を変更すると、そのstateを持つコンポーネントのrender関数が再び呼び出されます.
render関数サブコンポーネントのrender関数もすべて呼び出され、画面が再ロードされます.
👉レンダーはどんなhtmlを描くかを決める関数だから!
reactは、ステータス値またはprops値が変更されたときに、対応するコンポーネントのプレゼンテーション関数を呼び出すことを約束します.画面を再描画します.
条件文を使用して✔modeの値に基づいて異なるレンダリング結果を作成する
this.state.パターンがWelcomeなら~
this.state.パターンがReadなら~

   let _title, _desc = nul;
   if(this.state.mode === 'welcome'){
     _title = this.state.welcome.title; //title의 값
     _desc = this.state.welcome.desc; //desc의 값
   }else if(this.state.mode === 'read'){

   }

コンソールは、stateまたはpropsを変更して再ロードすることを確認するために、各コンポーネントのrender()関数にあります.ロゴを撮ってみます.ex

import { Component } from 'react';

class Content extends Component {
    render(){
      console.log('Content redner');
      return(
        <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
    </article>
      );
    }
  }

  export default Content;

ブラウザが再ロードされると、各コンソールウィンドウが出力されることを確認します.
「開発者ツール」ウィンドウで、Stateのモード値を変更しようとします.stateが変更されると、接続されたredner関数が変更されたコンポーネントのstate値に呼び出されます.

💡 一番上のタイトルをクリックして、JavaScriptを追加して置き換えます!

  render() {
    console.log('App redner');
    var _title, _desc = null;
    if(this.state.mode === 'welcome'){
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;

    }else if(this.state.mode === 'read'){
      _title = this.state.contents[0].title;
      _desc = this.state.contents[0].desc;
    }
    return (
      <div className = "App">
        {/* <Subject title={this.state.subject.title}
         sub={this.state.subject.sub}></Subject> */}
         <header>
                <h1><a href="/">{this.state.subject.title}</a></h1>
                {this.state.subject.sub}
        </header>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

return (
      <div className = "App">
        {/* <Subject title={this.state.subject.title}
         sub={this.state.subject.sub}></Subject> */}
         <header>
                <h1><a href="/" onClick={function(e){
                  e.preventDefault();
                  this.state.mode = "welcome";
                }}>{this.state.subject.title}</a></h1>
                {this.state.subject.sub}
        </header>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );

理由。

stateの値が変更されたことを伝えるべきです.this.setStateを使用する必要があります.

  bind() 「編んで、刺してあげました」 renderという名前の関数を呼び出すと、この関数では呼び出されたコンポーネント自体、すなわちここではAppになります。 以下に示すように、コンソールウィンドウでこの操作を試みます。 ここにいるよ!!!さっき作成したbind(this)を削除し、コンソールウィンドウに再出力します。

📌.テストbind

  setState()

💡 いつ使いますか。