在哪里在React JS中声明变量

Question

我试图在react-js类中声明一个变量。该变量应该可以在不同的函数中访问。这是我的代码

class MyContainer extends Component {
    constructor(props) {
        super(props);
        this.testVarible= "this is a test";  // I declare the variable here
    }
    onMove() {
        console.log(this.testVarible); //I try to access it here
    }
}

在onMove上，this.test的值是不确定的。我知道我可以将值放在状态上，但我不想这样做，因为每次值更改时，都会调用render（），这是不必要的。我是新来的反应者，我做错了什么吗？

Answer 1

在React中使用ES6语法不会绑定this到用户定义的函数，但是会绑定this到组件生命周期方法。

因此，您声明的函数不会与该类具有相同的上下文，并且尝试访问该函数this不会给您期望的结果。

为了获得类的上下文，您必须将类的上下文绑定到该函数或使用箭头函数。

方法1绑定上下文：

class MyContainer extends Component {

    constructor(props) {
        super(props);
        this.onMove = this.onMove.bind(this);
        this.testVarible= "this is a test";
    }

    onMove() {
        console.log(this.testVarible);
    }
}

方法2绑定上下文：

class MyContainer extends Component {

    constructor(props) {
        super(props);
        this.testVarible= "this is a test";
    }

    onMove = () => {
        console.log(this.testVarible);
    }
}

方法2是我的首选方法， 但是您可以自由选择自己的方法。

更新： 您也可以在没有构造函数的类上创建属性：

class MyContainer extends Component {

    testVarible= "this is a test";

    onMove = () => {
        console.log(this.testVarible);
    }
}

注意 如果还想更新视图，则在设置或更改值时应使用state和setState方法。

例：

class MyContainer extends Component {

    state = { testVarible: "this is a test" };

    onMove = () => {
        console.log(this.state.testVarible);
        this.setState({ testVarible: "new value" });
    }
}