Estoy tratando de declarar una variable en una clase react-js. La variable debe ser accesible en diferentes funciones. este es mi codigo
class MyContainer extends Component { constructor(props) { super(props); this.testVariable= "this is a test"; // I declare the variable here } onMove() { console.log(this.testVariable); //I try to access it here } } En onMove, el valor de this.testVariable no está definido. Sé que podría poner el valor en el estado, pero no quiero hacerlo porque cada vez que cambia el valor, se llamará a render() , lo cual no es necesario. Soy nuevo en reaccionar, hice algo mal?
El uso de la sintaxis de ES6 en React no vincula this a las funciones definidas por el usuario; sin embargo, this vinculará a los métodos del ciclo de vida del componente.
Entonces, la función que declaró no tendrá el mismo contexto que la clase y tratar de acceder a this no le dará lo que espera.
Para obtener el contexto de la clase, debe vincular el contexto de la clase a la función o usar funciones de flecha.
Método 1 para vincular el contexto:
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); } }Método 2 para vincular el contexto:
class MyContainer extends Component { constructor(props) { super(props); this.testVarible= "this is a test"; } onMove = () => { console.log(this.testVarible); } }El método 2 es mi forma preferida, pero eres libre de elegir la tuya.
Actualización: también puede crear las propiedades en la clase sin constructor:
class MyContainer extends Component { testVarible= "this is a test"; onMove = () => { console.log(this.testVarible); } } Nota Si también desea actualizar la vista, debe usar el método state y setState cuando establezca o cambie el valor.
Ejemplo:
class MyContainer extends Component { state = { testVarible: "this is a test" }; onMove = () => { console.log(this.state.testVarible); this.setState({ testVarible: "new value" }); } }Suponiendo que onMove es un controlador de eventos, es probable que su contexto sea diferente a la instancia de MyContainer , es decir, this apunta a algo diferente.
Puede vincular manualmente el contexto de la función durante la construcción de la instancia a través 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); } } Además, test !== testVariable .