JSX语法

/**
  * 01.jsx 本身是一个表达式二
  * 02.jsx 添加属性
  *    字符串属性,直接双引号包裹
  *     动态属性,
  * 03.jsx 添加子元素
  * 04.jsx 返回值只能有一个父元素
  * 05.jsx 使用单标签时需要语法关闭 否则报错
  *
 */

const name=<div>jsx</div>
const age=100

function App() {
  return (
    <div>
        {name}
        <p title="添加属性">添加属性</p>
        <p title={age}>添加动态属性</p>
    </div>
  );
}

/**
 *1.JSX可以看做是js语言的扩展 既不是字符串也不是HTML
 *2.JSX具备了js所有的功能，同时还可以转化为HTML 在界面上进行展示
 *
 *--动态显示数据 {}
 *--调用方法:自定义+语言内置
 *--支持表达式,不支持if/else,支持三元表达式
 *--模板字符串
 *--注释
 *--对象
 *
 */
const name='jsx'
const flag=false
const obj={
  name:'jsx',
  age:100
}

function sayHello(){
  return '大家好'
}
function App() {
  return (
    <div>
      <p>{name}</p>
      <p>name</p>
      <p>{sayHello()}</p>
      <p>{Math.random()}</p>
      <p>{1+2+3}</p>
      <p>{ flag ?'登录':'注册'}</p>
      <p>{`hello ${name}`}</p>
      <p>123456{/* 注释的内容 */}</p>
      <p>{JSON.stringify(obj)}</p>
    </div>
  );
}

export default App;

/**
  *jsx 事件操作
  *01.事件绑定 驼峰命名直接添加
  *02.事件监听传参
    一、利用箭头函数内部调用事件监听的时候传递实参，
    二、利用bind方法返回一个新的函数在事件调用时可以传参
  *03.获取事件对象
    一、默认情况下不需要接收参数，且直接执行此时第一个参数就是事件对象 ev
    二、利用箭头函数进行事件监听的时候，通过箭头函数将ev 传递给事件监听函数进行使用
    三、利用bind方法执行时如果有传参那么最后一个参数默认接收到的就是ev
 */
const handler=function(){
  console.log('事件监听执行了')
}
const handler2=function(a,b){
  console.log(a,b)
}
const handler3=function(a,b,ev){
  console.log(a,b)
  console.log(ev)
}
function App() {
  return (
    <div>
      <button onClick={handler}>点击触发事件</button>
      <button onClick={()=>handler2(1,2)}>点击触发事件2</button>
      <button onClick={handler2.bind(null,100,200)}>点击触发绑定事件事件</button>
      <button onClick={handler3}>点击获取事件对象</button>
      <button onClick={(ev)=>{handler3(ev)}}>点击传递事件对象</button>
      <button onClick={handler3.bind(null,10,20)}>点击传递事件对象</button>

    </div>
  );
}

export default App;