Hay una pequeña diferencia entre los atributos React (JSX) y HTML . Como por ejemplo, el atributo HTML como class y for se reemplazan con className y htmlFor en React. Hay una serie de atributos que funcionan de manera diferente entre React y HTML. La gramática en JSX es casi la misma que en HTML, pero hay diferencias sutiles a tener en cuenta.
No podemos usar los atributos con el mismo nombre tanto en React como en HTML porque cuando el código se procesa en React, JSX se traduce a JavaScript, y los atributos como class y for son palabras reservadas en JavaScript, por lo que no podemos usar el mismo nombre de atributo en React.
1. className: en HTML, es común usar la clase como un nombre de atributo como se muestra a continuación:
<h1 class="gfg">Welcome to GeeksforGeeks</h1>
Pero en JSX, no podemos usar la palabra clase . Tenemos que usar className en su lugar, que se aplica a todos los elementos DOM regulares como <div>, <a> y otros. Esto se debe a que JSX se traduce a JavaScript y clase es una palabra reservada en JavaScript.
<h1 className="gfg">Welcome to GeeksforGeeks</h1>
Cuando se representa JSX, los atributos className de JSX se representan automáticamente como atributos de clase .
2. Etiqueta de cierre automático: algunos elementos HTML como <img>, <br> y <input> usan solo una etiqueta. La etiqueta que pertenece a una sola etiqueta que no tiene una etiqueta de apertura ni una etiqueta de cierre, se llama etiqueta de cierre automático .
Cuando escribimos una etiqueta de cierre automático en HTML, es opcional usar la etiqueta de cierre automático. Por ejemplo:
<img src=""> and <input>
Pero en JSX, tenemos que incluir la barra diagonal.
<img src="" /> and <input />
3. htmlFor: en HTML, a menudo usamos el atributo for en el elemento <label> que es un control etiquetado para el elemento de la etiqueta.
<label for="username">Click me</label> <input type="text" id="username">
Pero en React en lugar del atributo for , podemos usar el atributo htmlFor .
4. Seleccionar etiqueta: en HTML, la etiqueta <select> crea varias opciones y valores. Nuestro componente react-select sigue la misma convención, pero las opciones y los valores se pasan como accesorios. Por ejemplo:
<select>
<option value="GFG">GFG</option>
<option value="OS">OS</option>
<option value="DBMS">DBMS</option>
<option selected value="Data Structure">
Data Structure
</option>
</select>
Nota: La opción Estructura de datos se selecciona inicialmente debido al atributo seleccionado. Pero en React, en lugar de usar un atributo seleccionado, usa un atributo de valor en la etiqueta de selección raíz que se muestra en el siguiente ejemplo.
render() {
return (
<select value={this.state.value}
onChange={this.handleChange}>
<option value="GFG">GFG</option>
<option value="OS">OS</option>
<option value="DBMS">DBMS</option>
<option selected value="Data Structure">
Data Structure
</option>
</select>
)
}
5. Etiqueta de área de texto: En HTML , la etiqueta <área de texto> define un control de entrada de texto de varias líneas, como se muestra a continuación.
<textarea>Welcome to GeeksforGeeks</textarea>
Pero en React <textarea> usa un atributo de valor como se muestra a continuación.
render() {
return (
<textarea value={this.state.value}
onChange={this.handleChange} />
)
}
6. DangerlySetInnerHTML: en HTML, a menudo usamos innerHTML para establecer o devolver el contenido HTML de un elemento.
HTML
<!DOCTYPE html>
<html>
<body style="text-align: center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>DOM innerHTML Property</h2>
<p id="P">A computer science portal for geeks.</p>
<button onclick="geek()">
Try it
</button>
<p id="p"></p>
<script>
function geek() {
var x = document.getElementById("P").innerHTML;
document.getElementById("p").innerHTML = x;
document.getElementById("p").style.color = "green";
}
</script>
</body>
</html>
Pero en React en lugar de innerHTML podemos usar peligrosamente SetInnerHTML en el DOM del navegador como se muestra a continuación.
function gfg() {
return { __html: 'First · Second' };
};
<div dangerouslySetInnerHTML={gfg()} />
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA