iT邦幫忙

0

react 第二天,將Hello world 裝入變數中(JSX)

react 第二天,將Hello world 裝入變數中(JSX)

這和昨天的差不多,只不將Hello react移到外面。

<!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 hello = <a>Heloo react</a>
	
      ReactDOM.render(
        hello,
        document.getElementById('dom')
      );
    </script>
</body>
</html>

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

var hello = <a>Heloo react</a>

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

錯誤例子:ReactDOM.render(hello+hello,document.getElementById('hello'));
錯誤例子:ReactDOM.render(<a>hello</a><div>react</div>,document.getElementById('hello'));
正確例子:ReactDOM.render(<div>hello+hello</div>,document.getElementById('hello'));
正確例子:ReactDOM.render(<div>hello</div>,document.getElementById('hello'));

1 則留言

1
咖咖拉
iT邦研究生 4 級 ‧ 2020-07-23 10:49:52
<div id=hello</div>

這邊是不是打錯了?

jbuduoo iT邦新手 5 級 ‧ 2020-07-23 11:36:23 檢舉

謝謝,以修改

我要留言

立即登入留言