在哪里在React JS中声明变量

我试图在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(),这是不必要的。我是新来的反应者,我做错了什么吗?

回答:

在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);

}

}

但是您可以自由选择自己的方法。

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

class MyContainer extends Component {

testVarible= "this is a test";

onMove = () => {

console.log(this.testVarible);

}

}

如果还想更新视图,则在设置或更改值时应使用statesetState方法。

例:

class MyContainer extends Component {

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

onMove = () => {

console.log(this.state.testVarible);

this.setState({ testVarible: "new value" });

}

}

以上是 在哪里在React JS中声明变量 的全部内容, 来源链接: utcz.com/qa/422769.html

回到顶部