用户投稿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'));
微信扫一扫打赏
支付宝扫一扫打赏
