Bertindak balas JSX


React menggunakan JSX dan bukannya JavaScript biasa.

JSX ialah sambungan sintaks JavaScript yang kelihatan seperti XML.

Kami tidak semestinya perlu menggunakan JSX, tetapi ia mempunyai kelebihan berikut:

  • JSX berprestasi lebih pantas kerana ia dioptimumkan selepas disusun ke dalam kod JavaScript.

  • Ia selamat jenis dan ralat boleh ditemui semasa penyusunan.

  • Menulis templat menggunakan JSX adalah lebih mudah dan pantas.

Menggunakan JSX

JSX kelihatan serupa dengan HTML, kita boleh lihat contoh:

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

Kita boleh menyarangkannya di atas kod Teg HTML berbilang perlu dibalut dengan elemen div Elemen p dalam contoh mempunyai atribut tersuai data-myattribute untuk menambah atribut tersuai, anda perlu menggunakan data-. awalan.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	<h1>php中文网</h1>
      	<h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Fail bebas

Kod React JSX anda boleh diletakkan pada fail bebas Sebagai contoh, kami mencipta fail helloworld_react.js dengan kod berikut: 

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Kemudian perkenalkan. ini dalam fail HTML fail JS:

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
  <script type="text/babel" src="helloworld_react.js"></script>
  </body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Ungkapan JavaScript

Kami boleh menggunakan ungkapan JavaScript dalam JSX. Ungkapan ditulis dalam kurungan kerinting {}. Contohnya adalah seperti berikut:

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	  <h1>{1+1}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

tidak boleh menggunakan pernyataan jika lain dalam JSX Anda boleh menggunakan ungkapan bersyarat (operasi ternari) . Dalam contoh berikut, jika pembolehubah i sama dengan 1, penyemak imbas akan mengeluarkan true Jika nilai i diubah, ia akan mengeluarkan palsu.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
	  var i = 1;
      ReactDOM.render(
      	<div>
      	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Run Instance»

Klik butang "Run Instance" untuk lihat contoh dalam talian

Gaya

React mengesyorkan menggunakan gaya sebaris. Kita boleh menggunakan sintaks camelCase untuk menetapkan gaya sebaris React akan menambah px secara automatik selepas menyatakan nombor elemen. Contoh berikut menunjukkan penambahan myStyle gaya sebaris pada elemen h1:

Contoh

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
      ReactDOM.render(
      	<h1 style = {myStyle}>php中文网</h1>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Ulasan

Ulasan perlu ditulis dalam kurungan kerinting , contohnya adalah seperti berikut:

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
            <h1>php中文网</h1>
            {/*注释...*/}
         </div>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Run Instance»

Klik butang "Run Butang Instance" untuk melihat contoh dalam talian

Array

JSX membenarkan memasukkan tatasusunan dalam templat dan tatasusunan akan mengembangkan semua ahli secara automatik:

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var arr = [
        <h1>php中文网</h1>,
        <h2> php中文网</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

Run instance»

Klik butang "Run instance" untuk melihat instance dalam talian

Teg HTML lwn. komponen React

React boleh menghasilkan teg HTML (rentetan) atau komponen React (kelas).

Untuk memaparkan teg HTML, hanya gunakan nama teg huruf kecil dalam JSX. 

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

Untuk memaparkan komponen React, cuma buat pembolehubah setempat bermula dengan huruf besar. 

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

JSX React menggunakan konvensyen huruf besar dan huruf kecil untuk membezakan antara kelas komponen asli dan teg HTML.

Nota:

Memandangkan JSX ialah JavaScript, beberapa pengecam seperti class dan for tidak disyorkan sebagai XML Nama harta. Sebaliknya, React DOM menggunakan className dan htmlFor untuk atribut yang sepadan.