技術標籤：react知識reactreactjs

元件的資料來源包含兩部分：內部狀態state-可修改；父元件傳值props-只讀

元件狀態state

• 狀態是元件私有的並且完全被元件控制（只有類元件有狀態，函式元件沒有狀態）
  • 元件內部狀態,state名稱固定

class TestClass extends React.Component {
  constructor(props) {
    // 建議始終新增如下一行程式碼
    super(props);
    // 元件內部狀態,state名稱固定
    this.state = {
      msg: 'hello'
    }
 

  }
  render () {
    let {msg} = this.state
    return (
      <div>類元件:{msg}</div>
    )
  }
}

例項

第一步：src下新建資料夾components，下面新建04.js

/*
  類元件的狀態
*/
import React from 'react'

class TestData extends React.Component {
  constructor (props) {
    // 建議第一行新增如下程式碼
    super(props);
    // 元件內部狀態的state名稱是固定的
 

    // 元件的資料來源包含兩部分：內部狀態state；父元件傳值props
    // 內部狀態可以修改，但是props是隻讀的
    this.state = {
      num: 123
    }
  }
  render () {
    let { num } = this.state
    let { info } = this.props
    return (
      <div>
        <div>測試類元件的內部狀態</div>
        <div>{this.state.num}</div>
 

        <div>{this.props.info}</div>
        <div>{ num } { info }</div>
      </div>
    )
  }
}

export default TestData

第二步：App.js中進行引入

import React from 'react';
import './App.css';
import TestData from './component/04-類元件的狀態'

function App () {
  return (
    <div>
       <TestData info='hello'/>
    </div>
  )
}

export default App;

npm run start啟動專案，開啟介面