今日目的

今天要設定內部屬性，以及使用內部屬性。

設定內部屬性(State)

內部屬性(state)比較像是組件內部的變數，有私有(private)與封裝(encapsulated)的概念，只有組件可以使用自己的內部屬性(state)。

創建Todolist組件並且定義State

請在src資料夾裡創建Todolist組件，如圖

如果要用內部屬性State就必須在constructor內設定State，呼叫內部屬性時必須要加{}，然後this.state.內部屬性名來呼叫，Todolist組件的程式碼如下

import React from 'react';
class Todolist extends React.Component {
  
    constructor(props) { //建構子 = 初始化時設定屬性
        super(props);//繼承props屬性讓props可以正常使用
        this.state = {
          test:"apple",
        };//內部自定義的變數
       
    }
      
  render() {
   
    return(
      <div>
         {this.state.test} {/* 引用內部屬性"test" */}
      </div>
    );
  }

}
export default Todolist;

定義State好後掛載組件

請移動到App.js，掛載Todolist組件，把程式碼改成如下。

import React from 'react';
import Todolist from './Todolist';
class App extends React.Component {
  
  render() {

    return(
      <div>
        <Todolist/>
      </div>
    );
  }
}
export default App;

畫面會如圖

昨天的外部屬性跟內部屬性都是React很重要的地方，也是React特色之一，請盡量學會。
參考資料:
https://reactjs.org
自己