antd pro学习之react扫盲学习（四）

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）