reagire JSX
Reagire a sostituire l'uso convenzionale JSX JavaScript.
JSX si presenta come XML è un'estensione della sintassi JavaScript.
Non necessariamente utilizzare il JSX, ma ha i seguenti vantaggi:
- JSX esecuzione più veloce perché viene compilato in codice JavaScript dopo l'ottimizzazione.
- E 'il tipo di sicurezza, può essere trovato durante gli errori di compilazione.
- Utilizzare JSX template di authoring più semplice e veloce.
Usa JSX
JSX simile a HTML, possiamo guardare esempi:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Possiamo essere annidati nel codice sopra più tag HTML, è necessario utilizzare un elemento div che lo circonda, elemento casi p aggiunge attributo personalizzatodei dati-MyAttribute, aggiungere attributi personalizzati devono usare data-prefisso.
ReactDOM.render(
<div>
<h1>本教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);
file indipendente
Il tuo codice Reagire JSX può essere posizionato su un documento separato, per esempio, creiamo un helloworld_react.js di file, come segue:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Poi ha introdotto nel file JS nel file HTML:
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
espressione JavaScript
Siamo in grado di utilizzare le espressioni JavaScript nella JSX. Scrivi una espressione tra parentesi graffe{}.Esempi sono i seguenti:
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
Non è possibile utilizzarese else in JSX, un singolo può usare l'espressione (operatore ternario) condizionale,invece. Il seguente esempio, se la variabilei èuguale a uscita volontà1del browservero,se si modifica il valore di i, il risultato saràfalso.
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
stile
Reagire consiglia di utilizzare gli stili inline. Siamo in grado di utilizzare la sintassicamelCase per impostare gli stili inline. Reagire aggiunge automaticamente pxdopo un numero elemento specificato. L'esempio seguente mostra come aggiungeremyStyle stile in linea per gli elementi H1:
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>本教程</h1>,
document.getElementById('example')
);
nota
Nota bisogno di scrivere tra parentesi, gli esempi sono i seguenti:
ReactDOM.render(
<div>
<h1>本教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
schieramento
JSX permette l'inserimento nella matrice modello, la matrice si espande automaticamente per tutti i membri:
var arr = [
<h1>本教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
tag HTML vs Reagire assemblaggio
Reagire può rendere i tag HTML (stringhe) o reagire componenti (classi).
Per rendere i tag HTML, basta usare il nome del tag in lettere minuscole nel JSX.
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
Per eseguire il rendering Reagire componente, è sufficiente creare un inizio variabile locale con la lettera maiuscola.
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
Reagire il JSX utilizzare convenzioni superiore e inferiore di casi di distinguere le classi di componenti locali e tag HTML.
Nota:
Perché JSX è JavaScript, un certo numero di identificatori, come
classefornon raccomandati come un nome di attributo XML. In alternativa, Reagire DOM usaclassNameehtmlForfare la proprietà corrispondente.