在哪里在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);
}
}
如果还想更新视图,则在设置或更改值时应使用state
和setState
方法。
例:
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