如何設置初始狀態使用ES6類反應

Question

我創造了這個類

class App extends Component{ 
    render() { 
     return (
      <div className="app"></div> 
     ); 
    } 
} 

如何設置初始狀態？ getInitialState（）不起作用？ 我做錯了什麼？反應文件也沒有幫助。

Answer 1

import React, { Component } from 'react'; 

export default class App extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      text: 'Hello World' 
     }; 
    } 
    render() { 
     return (
      <div> 
       {this.state.text} 
      </div> 
     ); 
    } 
} 

您可能也想看看這個職位約之間時使用一個構造函數以及何時使用getInitialState的差異。

What is the difference between using constructor vs getInitialState in React/React Native?

Answer 2

作爲@大衛 - 克里斯托弗 - 薩莉說，還有詹娜的偉大答案，不使用constructor或this的快捷方式：

class App extends Component { 
    state = { 
     text: 'Hello World' 
    }; 
    render() { 
     return (
      <div> 
       {this.state.text} 
      </div> 
     ); 
    } 
} 

一個簡單的例子表明，輸出是在這兩種情況下是相同的：

• Babel with constructor
• Babel without constructor

但是，如果我們擴展父類中，transpiled輸出也有所不同，因爲參數的構造函數的數量是未知的。