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(<h1>{test}</h1>,document.getElementById('test'));
function function1() {
alert("hello");
}
const button =<button onClick={function1}>button</button>;
ReactDOM.render(button,document.getElementById('test'));
3.条件语句
JSX中不能使用if else语句,但是可以使用三元运算表达式来代替。如:
ReactDOM.render(<h1>{1!=2?"sure":"impossible"}</h1>,document.getElementById('test'));
也可以使用与‘&&’ 或‘||’ 非‘!’来进行条件判断。
4.数组的使用
数组可以直接定义:
var arr = [
<h1>test1</h1>,
<h2>test2</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('test')
);
也可以用.map(),这个其实更加方便。比如:
var arr = ['test1','test2','test3'];
var arrList = arr.map((arr,index) => <li key={index}>{arr}</li>);
ReactDOM.render(<ul>{arrList}</ul>,document.getElementById('test'));
5.样式的使用
var myStyle = {
fontSize: 20,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>hello world</h1>,
document.getElementById('test')
);
6.注释
JSX语法中,注释也要写在大括号内:
ReactDOM.render(
<div>
<h1>hello</h1>
{/*注释...*/}
</div>,
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 world</h1>;
不用JSX写就像这样:
const h1 = React.createElement(
"h1",
null,
"Hello, world"
);
这样的话,你会发现删掉babel这个CDN也可以显示”Hello,world”。但还是使用JSX比较方便。
第二篇《从零一起学》就到这里吧~