[React] State

この文章は生活コード反応講座15.2駅の内容に基づいて書かれた.

class App extends Component {
constructor (props){
super(props);
this.state = {
   subject :{title : 'WEB', sub: 'World Wide Web'}
}
}
render(){
  return (
   <div className="App">
   <Subject 
     title : {this.state.subject.title}
     sub:{this.state.subject.sub}>
     </Suject>
     <TOC></TOP>
     <Content title="HTML" desc="~~~~~~"></Content>
     </div>
  );
)
}

コードの説明

AppサブアセンブリであるSubjectは最初は
title ={title = "Web"}
sub={sub="worldwideapp"},propsの値はいずれもハードコーディングである.しかし、各値をstateに設定し、stateの値をsubjectに渡すことで、コードが改善される.
その過程は以下の通りである.
まずrender()の前に実行されるジェネレータを作成し、ステータス値を初期化します.
contructor (props){
super(props)... の初期化が完了すると、
this.stateの値を初期化します.
subjectの値をstateのsubject属性値に変更するため、再びオブジェクトにstateを付与します.
->キーtitleの値は「web」、subの値は「worldwideweb」です.
次は括弧(文字列入力ではなくjsコードと識別するため)、
それぞれstate.subject.title
this.state.subject.subを入力します.
このようにして、ステータス化前の画面と同じですが、各値はジェネレータ内部から取得されます.

整理する

アプリ内部で使用している状態はStateです.これは、作成したstate値をsubjectという素子のpropsとして使用する値です.
親コンポーネントAppのステータスを子コンポーネントに渡す場合は、親コンポーネントのstate値を子コンポーネントのprops値に渡すことができます.