Cómo implementar enlace dinámico de clases y estilos en React-JSX (con ejemplos)
Resumen: La manipulación de listas de clases de elementos y estilos en línea son requisitos comunes para el enlace de datos. La manipulación frecuente de elementos dom reducirá el rendimiento de JavaScript. Para lograr js de alto rendimiento, el enlace dinámico de clases y estilos es un. Alto nivel de alfabetización. Un curso obligatorio para programadores. Este artículo se basa en la sintaxis de React-JSX y se combina con la implementación de otros marcos para presentar cómo implementar el enlace dinámico de ClassName y Style.
Nota: Los ejemplos de este artículo han sido verificados. Si hay algún error, critíquelo y corríjalo.
La sintaxis para vincular objetos de clase HTML. Podemos cambiar de clase dinámicamente. pasando objetos a className:
Nota: use una sintaxis similar a la de objetos como vue y applets. No compatible
Ejemplo de error:
render(){
return
hola world
} se puede implementar mediante la siguiente sintaxis:
1 Utilice operadores lógicos en el archivo css
.box-color {
color: rojo;
}archivo js
render(){
return
hola mundo
}2. Utilice el archivo css del operador ternario
.box-show {
display: block;
}
.box-hide {
mostrar: ninguno;
}render(){
return
hola mundo
} 3. Los objetos de datos vinculados mediante funciones no tienen que ser en Definición integrada en la plantilla: puede definir una función, similar a la función de enlace de cálculo en el archivo vue
js
getIsError() {
return this. state.isError ?'box-color' : '';
}
render(){
return
hola mundo
} Nota: No se admite la escritura de las siguientes variables de objeto y no se informa ningún error. El nombre de clase de la consola se muestra como [objeto objeto], lo cual no es válido.
const classObj = {
'box-show': this.state.isShow,
'box-color': this.state.isError
}
render(){
return
hola mundo
} Generalmente en proyectos Utilice el enlace de funciones en escenarios con lógica compleja. El uso excesivo hará que la capa de vista y la capa lógica se entrelacen y sean confusas, lo que dificultará la lectura y el mantenimiento. Se recomienda utilizar operadores lógicos y clases de operadores ternarios de forma dinámica. atado.
Sintaxis de matriz La sintaxis de React-JSX no admite la sintaxis de matriz className. Pruebe el siguiente ejemplo:
archivo css
.box-hide {
pantalla: ninguna;
}
.box-color {
color: rojo;
}archivo js
this.state = {isShow: false}
render(){
return
hola mundo
} La consola muestra el resultado (no válido, hay una coma adicional en el medio):
hola mundo
Nota: dado que la sintaxis de matriz no es compatible, solo puedes reutilizar estilos desde "box-color" hasta "box-hide" y utilizar operador ternario para representar. Esto aumentará la cantidad de código CSS.La sintaxis de vincular objetos de estilo en línea. La sintaxis de los objetos de estilo es más intuitiva que la del objeto clasName y las funciones de procesamiento son más simples. El método de operador lógico y el método de vinculación de funciones pueden referirse a la implementación de className. A continuación se muestran solo tres introducciones: El uso de operadores ternarios:
El operador ternario es similar a las instrucciones vue-if y wx -if del subprograma WeChat de Vue y se puede implementar dinámicamente usando el estilo ternario. operador
archivo js
render(){
return
hola mundo
}Sintaxis de matriz La sintaxis de React-JSX no admite la sintaxis de matriz de estilo. Pruebe el ejemplo:
archivo js
render(){
return
} La consola muestra el resultado (no válido):
En resumen, para complete los requisitos del proyecto con alta calidadUtilice variables de estilo en su proyecto.
Artículos relacionados:
Html implementa una página de registro simple (con código)
¿Cuál es la diferencia entre la etiqueta de enlace CSS y la carga @import?