Javascript 在react js中声明变量的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47417217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Where to declare variable in react js
提问by user567
I am trying to declare a variable in a react-js class. The variable should be accessible in different functions. This is my code
我正在尝试在 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
}
}
On onMove, the value of this.test is undefined. I Know that I could put the value on the state but I don't want to do it because each time the value changes, render() will be called which is not necessary. I am new to react, did I make something wrong?
在 onMove 上，this.test 的值未定义。我知道我可以将值放在状态上，但我不想这样做，因为每次值更改时，都会调用 render()，这是不必要的。我是新来的反应，我做错了什么吗？
回答by Brijesh Bhakta
Using ES6 syntax in React does not bind thisto user-defined functions however it will bind thisto the component lifecycle methods.
在 React 中使用 ES6 语法不会绑定this到用户定义的函数，但会绑定this到组件生命周期方法。
So the function that you declared will not have the same context as the class and trying to access thiswill not give you what you are expecting.
因此，您声明的函数不会与类具有相同的上下文，并且尝试访问this不会给您带来预期的结果。
For getting the context of class you have to bind the context of class to the function or use arrow functions.
要获取类的上下文，您必须将类的上下文绑定到函数或使用箭头函数。
Method 1 to bind the context:
方法一绑定上下文：
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);
}
}
Method 2 to bind the context:
方法二绑定上下文：
class MyContainer extends Component {
constructor(props) {
super(props);
this.testVarible= "this is a test";
}
onMove = () => {
console.log(this.testVarible);
}
}
Method 2 is my preferred waybut you are free to choose your own.
方法 2 是我的首选方式，但您可以自由选择自己的方式。
Update:You can also create the properties on class without constructor:
更新：您还可以在没有构造函数的情况下在类上创建属性：
class MyContainer extends Component {
testVarible= "this is a test";
onMove = () => {
console.log(this.testVarible);
}
}
NoteIf you want to update the view as well, you should use stateand setStatemethod when you set or change the value.
注意如果您还想更新视图，则应在设置或更改值时使用state和setState方法。
Example:
例子：
class MyContainer extends Component {
state = { testVarible: "this is a test" };
onMove = () => {
console.log(this.state.testVarible);
this.setState({ testVarible: "new value" });
}
}
回答by Timo
Assuming that onMoveis an event handler, it is likely that its context is something other than the instance of MyContainer, i.e. thispoints to something different.
假设它onMove是一个事件处理程序，它的上下文很可能不是 的实例MyContainer，即this指向不同的东西。
You can manually bind the context of the function during the construction of the instance via Function.bind:
您可以通过Function.bind以下方式在构造实例期间手动绑定函数的上下文：
class MyContainer extends Component {
constructor(props) {
super(props);
this.onMove = this.onMove.bind(this);
this.test = "this is a test";
}
onMove() {
console.log(this.test);
}
}
Also, test !== testVariable.
还有，test !== testVariable。
