1. Home
  2. React JSX

Najlepszy samouczek React JSX W 2024 r. W tym samouczku możesz dowiedzieć się Korzystanie JSX,wyrażenie JavaScript,styl,uwaga,szyk,znaczniki HTML vs. React montaż,

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')
);

Spróbuj »

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>

Spróbuj »

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')
);

Spróbuj »

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')
);

Spróbuj »

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')
);

Spróbuj »

uwaga

Uwaga trzeba pisać w nawiasach, przykłady przedstawiają się następująco: 

ReactDOM.render(
	<div>
    <h1>本教程</h1>
    {/*注释pl.*/}
 	</div>,
	document.getElementById('example')
);

Spróbuj »

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')
);

Spróbuj »

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({/*pl.*/});
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 class i for niezalecane jako nazwy atrybutu XML. Jako alternatywę, React DOM użyć className i htmlFor zrobić odpowiednią nieruchomość.

Hot Tutorials

Contact US

React JSX
10/30