jsx,箭头函数
(一). jsx
JSX 是 JavaScript XML 的简写,写法大致和html相同
//定义了一个常量a
const a = <div>Hello react</div>
(1){}的应用
在jsx中的{}里可以进行数学运算(+ - * /%),逻辑运算(&&,true&&jsx代码返回jsx代码,false&&jsx代码返回false,页面无显示),函数,三运表达式,注释的编写格式
const Hello =()=>{
const num1=2;
const num2=2;
return(
<div>值是:{num1+num2}</div>
);
}
输出的结果是:
值是:4
const Hello =()=>{
const ele = <span>jsx代码</span>
return(
<div>{false&&ele}</div>
);
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
页面无输出,若是改成true,则输出为jsx代码
const fun = ()=>{
return(
<a>链接</a>
);
}
const Hello =()=>{
return(
<div>{fun()}</div>
);
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
输出结果:链接
const Hello =()=>{
return(
<div>{1>2 ? "对":'错'}</div>
);
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
输出结果:错
注意:不能用if else
const Hello =()=>{
return(
<div>
{/* 注释的编写格式 */}
<div>{1>2 ? "对":'错'}</div>
<font>1111</font>
</div>
);
}
注释格式:{/**/}
关键字:
const es6中声明常量关键字
let es6中声明变量关键字
(二)箭头函数
const Hello =()=>{
return(
<div>
<font>1111</font>
</div>
);
}
// function Hello(){
// return(
// <div>1111</div>
// );
// }
两种写法作用相同
相见es6官网(ECMAScript 6)