一、JSX简介
JSX 又名 JavaScript XML,JavaScript 的 XML 类语法扩展。在 js 中写一些 xml标签(html标签)。
JSX 仅仅只是 React.createElement(component, props, …children) 函数的语法糖。
二、为何使用JSX?
React不一定要使用JSX,为何强烈建议使用JSX。在JS中是不支持<div></div>
这样的 html 标签的,因此我们在使用 React 时只能通过 React.createElement() 函数的传参来创建虚拟 DOM 元素(React 元素)。这种在原生 JS 语法限制下的 React 的运用带来了极大地不方便,不仅书写上不方便,还需要在脑海中将 html 元素一个个地拆开来分析其包含与被包含的关系。考虑到这种不方便性,React 的开发者就使用了 JSX 语法,允许用户在 js 文件中直接使用 xml 语法写明要创建的标签元素信息。
使用JSX:
ReactDOM.render(
<div>
<div>
<button id='clickme'>Click Me</button>
</div>
</div>,
document.getElementById('root')
);
不使用JSX:
ReactDOM.render(
React.createElement('div',null,
React.createElement('div',null,
React.createElement('button',{id: 'clickme'},'Click Me'))),
document.getElementById('root')
);
从上对比可以明显看出JSX代码更简单,更偏向于XML/HTML格式 ,便于开发和维护。
JSX遇到HTML元素标签,底层会编译为React.createElement(component, props, …children) 。
三、JSX表达式
1、JSX嵌入表达式
在 JSX 中嵌入 JavaScript 表达式。表达式写在花括号 {} 中:
ReactDOM.render(
<h1>{1+1}</h1>,
document.getElementById('root')
);
在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代:
ReactDOM.render(
<h1>{i == 1 ? 'True!' : 'False'}</h1>,
document.getElementById('root')
);
2、JSX 也是一个表达式
可以在 if 语句和 for 循环的代码块中使用 JSX表达式:
function getWelcome(isStyle) {
if (isStyle) {
return <h1>Hello, {1+1}!</h1>;
}
return <h1>Hello, world.</h1>;
}
四、JSX 特定属性
可以通过使用引号,来将属性值指定为字符串字面量:
const element = <div id="name"></div>;
也可以使用大括号,来在属性值中插入一个 JavaScript 表达式:
const element = <div src={user.name}></div>;
在属性中嵌入 JavaScript 表达式时,不要在大括号外面加上引号。你应该仅使用引号(对于字符串值)或大括号(对于表达式)中的一个,对于同一属性不能同时使用这两种符号。
五、JSX 样式
React 推荐使用内联样式,在指定元素数字后会自动添加 px:
var myStyle={
color:'blue',
fontSize:50
}
ReactDOM.render(
<div>
<h1 style={myStyle}>{"Hello, world"}</h1>
</div>,
document.getElementById('root')
六、JSX 数组
JSX 允许在模板中插入数组,数组会自动展开所有成员:
var arr = [
<h1>hello!</h1>,
<h1>world!</h1>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('root')
);
七、JSX 注意事项
JSX 允许在大括号中嵌入任何表达式,需要注意的事项(请看注释):
var ListItem = (props) => { //es6中箭头函数
return <li>{props.value}</li>;
}
function NumberList(props) {
var numbers; //声明在外面是因为 {} 中不能出现var,const,let等这种关键字
return (
<ul>
{
numbers = props.numbers, //注意这里要加逗号
numbers.map((number) =>
<ListItem key={number}
value={number} />
)}
</ul>
);
}
var arr = [1,2,3]; //要传递的参数
ReactDOM.render(
<NumberList numbers={arr}/>, //这里的numbers就是props下的numbers,即props.numbers
document.all('example')
);
·········································································································································
本文介绍JSX用法~~请大家多多指教,能get到知识点不要忘了关注点个赞~。