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'));
iThome鐵人賽
看影片追技術