从零一起学react(2)---JSX语法进阶
JSX语法进阶
1.JSX元素需闭合
JSX元素中的标签都需要闭合，如：
<img .. />
<br/>2.JSX中的JS
在JSX中使用JS需要将JS放在{大括号内}，如：
ReactDOM.render(<h1>{2 + 3}h1>,document.getElementById('test'));再如：
const test = 'Hello World';
ReactDOM.render({test}
,document.getElementById('test'));function function1() {
alert("hello");
}
const button =<button onClick={function1}>buttonbutton>;
ReactDOM.render(button,document.getElementById('test'));3.条件语句
JSX中不能使用if else语句，但是可以使用三元运算表达式来代替。如：
ReactDOM.render({1!=2?"sure":"impossible"}
,document.getElementById('test'));也可以使用与‘&&’ 或‘||’ 非‘！’来进行条件判断。
4.数组的使用
数组可以直接定义：
var arr = [
<h1>test1h1>,
<h2>test2h2>,
];
ReactDOM.render(
<div>{arr}div>,
document.getElementById('test')
);也可以用.map()，这个其实更加方便。比如：
var arr = ['test1','test2','test3'];
var arrList = arr.map((arr,index) => {arr} );
ReactDOM.render({arrList}
,document.getElementById('test'));5.样式的使用
var myStyle = {
fontSize: 20,
color: '#FF0000'
};
ReactDOM.render(
hello world
,
document.getElementById('test')
);6.注释
JSX语法中，注释也要写在大括号内：
ReactDOM.render(
hello
{/*注释...*/}
,
document.getElementById('test')
);独立文件
你可以将JSX代码放在一个独立文件中，例如创建helloworld.js文件，代码如下：
ReactDOM.render(
<h1>Hello, world!h1>,
document.getElementById('test')
);然后在HTML中引入该JS文件：
<body>
<div id="test">div>
<script src="./react/react.development.js">script>
<script src="./react/react-dom.development.js">script>
<script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js">script>
<script type="text/babel" src="helloworld.js">script>
body>不用JSX
其实使用React也可以不使用JSX，比如下面的JSX表达式：
const h1 = <h1>Hello worldh1>;不用JSX写就像这样：
const h1 = React.createElement(
"h1",
null,
"Hello, world"
);这样的话，你会发现删掉babel这个CDN也可以显示”Hello，world”。但还是使用JSX比较方便。
第二篇《从零一起学》就到这里吧～