JSX概念&作用

 

概念：

jsx可以看作是JS语言的扩展，它既不是一个字符串也不是一个HTML；

它具备了JS所有的功能，同时还可以被转为HTML在界面进行展示

 

作用：

动态显示数据  { }

调用方法：自定义 + 内置方法

支持表达式、 支持三元表达式（不支持if else）

模板字符串

 

下面为在react项目中的App.js示例代码

/*
1、JSX它本身就是一个表达式,可以被赋给参数使用传递
2、JSX添加属性
3、JSX 添加子元素
4、JSX返回值只能有一个顶级元素
*/
const name = '肥猫';
const flag = false
const divlabel = <div>哈喽</div>
const dynamictitle = "动态标题"


function sayHello(){
  if(flag == false){
    return "扭头就走";
  }
  return '大家好';
}



const testobj = {
  name:"肥猫",
  age:"100"
}



function App() {
  return (
    <div>
      <p>{name}</p>
      <p>name</p>
      <p>{sayHello()}</p>
      <p>{console.log('11111')}</p>
      <p>{1+2}</p>
      <p>{flag ? '登录的状态':"执行登录"}</p>
      <p>{`hello,${name}`}</p>
      <p>12345{/*这里是注释*/}</p>
      <p>{JSON.stringify(testobj)}</p>
      {divlabel}
      <div title='自定义标题'>添加属性</div>
      <p title={dynamictitle}>动态动态属性</p>
      <img />
    </div>
  )
}



export default App;