reaccionar JSX
Reaccionar para reemplazar el uso convencional JSX JavaScript.
JSX parece XML es una extensión de la sintaxis de JavaScript.
Nosotros no necesariamente utilizar la JSX, pero tiene las siguientes ventajas:
- JSX ejecutar más rápido porque se compila en código JavaScript después de la optimización.
- Es de tipo seguro, que se puede encontrar en los errores de compilación.
- Utilice la plantilla de creación JSX más fácil y más rápido.
uso JSX
JSX tiene una apariencia similar a HTML, podemos ver ejemplos:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Podemos estar anidados en el código anterior varias etiquetas HTML, es necesario utilizar un elemento div que lo rodea, elemento casos p añade atributo personalizadodatos MyAttribute, añaden los atributos personalizados necesitan usar de datosprefijo.
ReactDOM.render(
<div>
<h1>本教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);
archivo independiente
Su código Reaccionar JSX se puede colocar en un documento separado, por ejemplo, creamos un helloworld_react.js archivo, de la siguiente manera:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
A continuación, se introduce en el archivo JS en el archivo HTML:
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
expresión de JavaScript
Podemos utilizar expresiones de JavaScript en el JSX. Escribe una expresión entre llaves{}.Ejemplos son los siguientes:
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
No se puede utilizarsi else en JSX, un solo pueden utilizar la expresión (operador ternario) condicionalen su lugar. En el siguiente ejemplo, si la variablei esigual a1explorador de resultados voluntadverdadera,si se modifica el valor de i, se dará salidafalsa.
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
estilo
Reaccionar recomendar el uso de estilos en línea. Podemos utilizar la sintaxiscamelCase para establecer los estilos en línea. Reaccionar añade pxautomáticamente después de un número de elemento especificado. El siguiente ejemplo muestra cómo agregar estilo en líneamyStyle para los elementos h1:
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>本教程</h1>,
document.getElementById('example')
);
nota
Nota que tenga que escribir en los apoyos, los ejemplos son los siguientes:
ReactDOM.render(
<div>
<h1>本教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
formación
JSX permite la inserción en la matriz de la plantilla, la matriz se expandirá automáticamente a todos los miembros:
var arr = [
<h1>本教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
Reaccionar frente a las etiquetas HTML ensamblaje
Reaccionar puede hacer que las etiquetas HTML (cadenas) o reaccionar componentes (clases).
Para hacer que las etiquetas HTML, sólo tiene que utilizar el nombre de la etiqueta en letras minúsculas en el JSX.
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
Para hacer Reaccionar componente, basta con crear un inicio variable local con una letra mayúscula.
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
Reaccionar el JSX utilizar convenciones mayúsculas y minúsculas para distinguir las clases de componentes locales y etiquetas HTML.
Nota:
Debido a que es JSX JavaScript, una serie de identificadores tales como
classyforno recomendados como nombre de atributo XML. Como alternativa, Reaccionar DOM utilizarclassNameyhtmlForhacer la propiedad correspondiente.