第二天,React的變數竟然可以放html的tag，這個功能叫JSX

第 12 屆 iThome 鐵人賽

DAY 2

自我挑戰組

React基礎系列第 2 篇

12th鐵人賽 react

jbuduoo

2020-09-02 09:12:10

860 瀏覽

分享至

JAVA SCRIPT 是不能接受變數中有html標籤如之類的。
而這個可以接受html標籤的功能叫JSX，就是可以將一般的內容加上HTML的標籤使用。
而這個功能必須匯入babel.min.js這個函式庫。

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

而今天的內容這和昨天的差不多，只不將Hello react移到外面裝入jsxdata變數中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id='dom'></div>
    <script type='text/babel'>
	  var jsxdata = <a>Heloo react</a>
	
      ReactDOM.render(
        jsxdata,
        document.getElementById('dom')
      );
    </script>
</body>
</html>

說明:
var jsxdata = Heloo react
ReactDOM.render(參數一,參數二);而參數一就只能接受JSX的內容，它准許變數型態的資料，但變數形態的資料最後一定要用HTML標籤夾在一起。

錯誤例子:ReactDOM.render(hello+hello,document.getElementById('hello'));
錯誤例子:ReactDOM.render(helloreact,document.getElementById('hello'));
正確例子:ReactDOM.render(hello+hello,document.getElementById('hello'));
正確例子:ReactDOM.render(hello,document.getElementById('hello'));