React入門1(JSX、JS表示式、樣式、註釋、陣列)
阿新 • • 發佈：2021-02-04
1.React元素渲染(JSX)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React JSX</title> <script src="js/react/16.4.0/umd/react.development.js"></script> <script src="js/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="js/babel-standalone/6.26.0/babel.min.js"></script> <style> .content{ width:300px; height:150px; display:flex; justify-content:center; align-items:center; border:1px solid #ccc; border-radius:8px; } </style> </head> <body> <div id="wrapper"></div> <script type="text/babel"> const element = <h1 className="content">Hello, world</h1>; const wrapper=document.getElementById('wrapper'); ReactDOM.render(element, wrapper); </script> </body> </html>
如何在JSX中使用JavaScript 表示式呢？
<script type="text/babel">
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
</script><script type="text/babel"> var i = 1; ReactDOM.render( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div> , document.getElementById('example') ); </script>
如何在JSX中使用樣式呢？
React 推薦使用內聯樣式，React 會在指定元素數字後自動新增px。
<script type="text/babel"> var hStyle = { fontSize: 100, color: 'yellow' }; ReactDOM.render( <h1 style = {hStyle}>你好</h1>, document.getElementById('example') ); </script>
如何在JSX中使用註釋呢？
註釋需要寫在花括號中
<script type="text/babel">
ReactDOM.render(
<div>
{/*註釋：標題*/}
<h1>註釋</h1>
</div>,
document.getElementById('example')
);
</script>如何在JSX中使用陣列呢？
JSX中陣列會自動展開所有成員
<script type="text/babel">
var arr = [
<h1>姓名：曾小超</h1>,
<h2>性別：男</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
</script>