React JSX
React zastąpić konwencjonalne użycie JSX JavaScript.
JSX wygląda XML stanowi rozszerzenie składni JavaScript.
Nie muszą używać JSX, ale ma następujące zalety:
- JSX wykonywać szybciej, ponieważ jest kompilowany do kodu JavaScript po optymalizacji.
- Jest to typ bezpieczny, można go znaleźć w czasie błędów kompilacji.
- Użyj łatwiej JSX szablonu tworzenia treści i szybciej.
Korzystanie JSX
JSX wygląda podobnie do formatu HTML, możemy spojrzeć na przykłady:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Możemy być zagnieżdżone w kodzie powyżej wielu znaczników HTML, trzeba elementem wystąpień p dodaje niestandardowy atrybutdata-myattribute dodać niestandardowe atrybuty muszą korzystać data-prefiks użyć elementu div otaczających go.
ReactDOM.render(
<div>
<h1>本教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);
Niezależny pliku
Kod React JSX można umieścić na osobnym dokumencie, na przykład, możemy utworzyć helloworld_react.js plik, co następuje:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Następnie wprowadzono do pliku JS w pliku HTML:
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
wyrażenie JavaScript
Możemy użyć wyrażeń JavaScript w JSX. Wpisz wyrażenie w nawiasach klamrowych{}.Przykłady są następujące:
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
Nie można używaćw przypadku else w JSX pojedynczy mogą korzystać z warunkowego (operator trójargumentowy)zamiast wyrażenia. Poniższy przykład, jeśli zmiennai jestrówna1przeglądarki wyjścia woliprawdziwego,jeśli zmienić wartość i, to wyświetlifałszywy.
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
styl
React zalecamy użycie wbudowanych stylów. Możemy użyć składnicamelCase ustawić style inline. React dodaje pxautomatycznie po określonej liczbie elementów. Poniższy przykład ilustruje dodawaniemyStyle styl wbudowany dla elementów H1:
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>本教程</h1>,
document.getElementById('example')
);
uwaga
Uwaga trzeba pisać w nawiasach, przykłady przedstawiają się następująco:
ReactDOM.render(
<div>
<h1>本教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
szyk
JSX umożliwia wstawienie szablonu tablicy, tablica zostanie automatycznie rozwinąć do wszystkich członków:
var arr = [
<h1>本教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
znaczniki HTML vs. React montaż
React można renderować tagi html (sznurki) lub reagować składników (klas).
Aby uczynić tagów HTML, wystarczy użyć nazwę znacznika w małych liter w JSX.
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
Aby uczynić React komponentu, wystarczy utworzyć lokalną zmienną o nazwie rozpoczynającej się literą.
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
Przereagowania JSX użyć wielkich i małych liter konwencje odróżnić klas lokalnych składników i tagów HTML.
Uwaga:
Ponieważ JSX jest JavaScript, liczba identyfikatorów, takich jak
classiforniezalecane jako nazwy atrybutu XML. Jako alternatywę, React DOM użyćclassNameihtmlForzrobić odpowiednią nieruchomość.