Publicado por primera vez en: https://mingjiezhang.github.io/.
En JavaScript, este objeto está vinculado al entorno de ejecución basado en funciones de tiempo de ejecución (es decir, contexto).
Comience con la demostración en React
Cuando Facebook actualizó recientemente React, la clase en ES6 se agregó al método de creación de componentes. Facebook también recomienda que el uso de la creación de componentes define una clase de componentes definiendo una clase heredada de React.Component. Demostración oficial:
class LikeButton extiende react.Component {constructor () {super (); this.state = {me gusta: false}; this.handleclick = this.handleclick.bind (this);} handLecLick () {this.setState ({gusto:! 'me gusta': 'haven/' t me gustó '; return (<div onClick = {this.handleclick}> you {text} this. Haga clic para alternar. </div>);}} reactdom.render (<me gusta />,document.getElementByid('Example'));Hay mucho de este uso en la demostración anterior. En clase como Button extiende React.Component, declaramos la clase porque esto está específicamente determinado por su contexto, por lo que no podemos conocer el uso de esto en la definición de clase. Es equivalente a la nueva clase definida anteriormente, primero llamando a la función constructor (), el contexto de este.state es el objeto de instancia; Del mismo modo, el contexto de este.state.liked en la función render () también es el objeto. El problema es que onClick = {this.handleclick}, no hay problemas para obtener la referencia a esta función, y el contexto aquí es el objeto.
En este momento, el problema es que en React.CreateCLass, HandLecLick () se unirá automáticamente a la instancia de KiKButton cuando se active el evento OnClick. En este momento, el contexto de esta función es la instancia. Sin embargo, en la redacción de la clase ES6, Facebook canceló el enlace automático. Después de instanciar a LikeButton, el contexto de HandLeclick () es la instancia de soporte de DIV (instancia de respaldo), y el contexto de HandLeclick () originalmente está obligado a ser una instancia de Like Button. Tenemos múltiples soluciones a este problema.
Usar la función bind () para cambiar el contexto de este
Puede usar la función constructor () en la declaración de clase
this.handleclick = this.handleclick.bind (this);
Este método es un enlace Bind () y se usa varias veces. En este método, después de declarar la instancia, podemos usar la función HandLecLick () en cualquier lugar de la instancia, y el contexto de esta función HandLecLick () es un objeto de instancia de Button.
Además, también podemos unir este contexto al objeto de instancia de Button como se usa la función. El código es el siguiente
<div onClick = {this.handleclick.bind (this)}> you {text} esto. Haga clic para alternar. </div>Este método requiere que nos unamos al objeto componente cada vez que usa la función bind ().
Función de flecha de ES6
Se ha agregado una función de flecha => a ES6. Además de la conveniencia, una función de flecha tiene otra característica que es unir esta función al contexto en el que se define. Esta característica también puede ayudarnos a resolver este problema. Use el siguiente código:
<div onClick = {() => this.handleclick ()}> you {text} esto. Haga clic para alternar. </div>De esta manera, el contexto de este.handleclick () estará vinculado al objeto de instancia de KikeButton. Personalmente, creo que el uso de funciones de flecha hace que JavaScript se acerque al estilo de programación orientado a objetos.
Este resumen
La esencia de esto es: esto no tiene nada que ver con el alcance, sino solo con el contexto de ejecución.
Lo anterior es el método para crear este componente en ES6 en React que el editor le presentó. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!