Question

componentDidMount : function()
{
    console.log(this);//1
    console.log(this.state);//2
}

第1行显示所有细节，不包括所有状态变量，但第2行给出空对象。为什么？我如何访问状态变量或其他函数？

Answer 1

这是预期的，因为在使用之前需要定义状态。 ES6类的常用方法是在构造函数中定义初始状态，例如：

class MyCmp extends React.Component {
    constructor() {
        super(); // don't forget to call superclass constructor
        this.state = {foo: 1};
    }

    componentDidMount() {
        console.log(this);//1
        console.log(this.state);//2
    }
}

如果您使用提案级JavaScript（例如，如果您在Babel配置中将stage-0或其他阶段号作为配置文件），那么您也可以将其定义为类属性：

class MyCmp extends React.Component {
    state = {
        foo: 1
    };

    componentDidMount : function() {
        console.log(this);//1
        console.log(this.state);//2
    }
}

如果您不使用ES6课程，您可以执行以下操作：

var MyCmp = React.createClass({
    getInitialState: function() {
        return {
            foo: 1
        }
    },
    componentDidMount : function() {
        console.log(this);//1
        console.log(this.state);//2
    }
}

我希望有所帮助。享受React！

＆＃34;这＆＃34;虽然可以，但是＆＃34; this.state＆＃34;无法使用

1 个答案: