【react学习】使用jsx

React JSX 优势:
  • 执行更快
  • 类型安全,可以在编译过程中发现错误
  • 写法更加简单
  JSX 语法:       样例:var myJSXElement=<div>hello word!</div>        这样一个直接把标签元素直接给一个变量的 就是jsx语法
  • 自定义属性 
          需要用data-前缀。  
 <p data-myattribute=“hhh”>hello!</p> 
  • Js表达式
          需要用{}包裹                     
<p>{1+1}</p>
  • 三目运算
          不可以用if else 可以用三目                
 <p>{ i==1?’是’:’否'}</p>
  • css样式
          推荐使用内联样式,                            
 var myStype={fontSize:100,color:’red’}   <p stype={myStype}>hello</p>
           也可以使用行内样式                
<p stype={{fontSize:100,color:’red'}}>hello</p>
  • 注释
          在标签内的注释 要写在{}内       
  <div>{/*这是注释*/}</div>
  • 数组
         可以将标签写在一个数组里,渲染的时候会自动展开所有成员     
var arr=[
         <h1>标题一</h1>
         <h2>标题二</h3>
        ]
ReactDOM.render(
  <div>{arr}</div>,
  Document.getElementById(‘example’)
) 
上一篇:React(1)—— React简介、JSX语法、虚拟DOM


下一篇:技术周刊2020-09-28