Question

我创建了以下类

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

如何设置初始状态？
getInitialState()没有工作？我究竟做错了什么？
反应文档也没有帮助。

Answer 1

Jenna还有一个很好的答案，它没有使用constructor或this：

class App extends Component {
    state = {
        text: 'Hello World'
    };

    render() {
        return (
            <div>
                {this.state.text}
            </div>
        );
    }
}

简化示例显示两种情况下的输出相同：

但是如果我们扩展父类，则转换后的输出会有所不同，因为构造函数中的参数数量是未知的。

Answer 2

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?

如何在React中使用ES6类设置初始状态？

2 个答案: