React飞行日记(四) - 如何编写JSX代码

Jsx语法的编写

React的灵魂之一就是这个JSX语法了， JSX就是（JavaScript+XML），他的语法很奇特，也很有趣
其中 {} 是JSX语法的核心（“小胡子”），在JSX中用他来向视图中展示数据，用 {} 编写JSX代码的时候需要遵循以下的规则

正确写法

1. {} 是 JSX 语法，在 {} 中的内容皆会被识别成 JavaScript 代码

   若没用 {} 包裹，则标签之间的 会被当成字符串处理

   

2. {} 中使用有返回值的 js 表达式【如: 三元，立即执行函数，闭包，基本数据类型，数组(内无对象)…】

   // 1. 三元运算符【运行】
   ReactDOM.render(
     <section>{1 + 1 > 2 ? 'ok' : 'no'}</section>,		{/* no */}
     root,	
     () => {console.log(a);}
   )
   
   // 2. 立即执行函数|闭包【运行】
   ReactDOM.render(
     <section>{(() => {return 'ok'})()}</section>,		{/* ok */}
     root,
     () => {console.log(a);}
   )
   
   let a;
   ReactDOM.render(
     <section>{a = (() => { return 'ok' })()}</section>,		{/* ok */}
     root,
     () => { console.log(a); }
   )
   
   // 3. 基本数据类型【number|string|boolean(不显示)|undefined(不显示)|null(不显示)】
   ReactDOM.render(
     <section>		
       <div>{111 + 111}</div>				{/*  222  */}
       <div>{'111'}</div>						{/*  111  */}
       <div>{true}</div>							{/* 不显示 */}
       <div>{null}</div>							{/* 不显示 */}
       <div>{undefined}</div>				{/* 不显示 */}
     </section>,
     root,
     () => { console.log(a); }
   )
   
   // 4. 数组【不嵌套对象】:JSX处理数组：只显示能在JSX中显示的数据
   ReactDOM.render(
     <section>{[1, '2', true, null, undefined]}</section>,	{/* 12 */}
     root,
     () => { console.log(a); }
   )
   
   // 5. 其他有返回值的例子
   // 对象的具体值
   // 对象具体方法返回值
   let a = {
     value: 'ok',
     getData() { return +new Date() }
   };
   
   ReactDOM.render(
     <section>
       {a.getData()}
       <br />
       {a.value}
     </section>,
     root,
     () => { console.log(a); }
   )
   

错误写法

• JSX语法中的忌讳，绝对不能这样写

  // 1. 不能使用循环语句（报错）
  <section>
    {for(let i =0; i< 10; i++) {
      console.log(666)
    }}
  </section>
  
  // 2. 不能使用函数体（数据为空）
  <section>
    {function() {
      return 'ok'
    }}
  </section>
  
  // 3. 不能使用对象【包括{} /\d+/ Date ...】（报错）
  <section>
    {{a: 1, b: 2, c: 3}}
    {new Date()}
  	{/\d+/}
  </section>
  

循环写法

在JSX中循环绑定数据，必须给每个创建的元素一个第一无二的key值，为什么要key值给点击我

1. 使用 Array.map(item => <div>item</div>) 进行循环绑定

   let data = [1, 2, 3, 4]
   
   ReactDOM.render(
     <section>
       {data.map((item, index) => {
         return <div key={index}>{`我是${item}号`}</div>
       })}
     </section>,
     root
   )
   

   

2. 使用React自带的方法 React.Children.map(children, (item) => {<div>item</div>})

   let data = [1, 2, 3, 4]
   
   ReactDOM.render(
     <section>
       {React.Children.map(data, (item) => {return <div key={item.toString()}>{`我是${item}号`}</div>})}
     </section>,
     root
   )
   

   

3. 组件内部循环，利用JSX语法特性，自动解构列表并渲染数据

   let data = [1, 2, 3, 4]
   
   function For() {
     let arr = []
     for(let i in data) {
       arr.push(<div key={i}>{`我是${data[i]}号`}</div>)
     }
     return arr
   }
   
   ReactDOM.render(
     <section>
       {For()}					{/* 解构列表并渲染数据 */}
     </section>,
     root
   )
   

   

HTML写法

在JSX中怎么返回HTML数据，并且给其添加各种键值对等

1. 给标签添加 class，id

   // 由于webpack会帮我们整合所有代码， 所以我们需要什么样式直接 import 即可
   
   import 'static/css/myCss.css'		// 引入css样式，CSS加载器会处理
   
   ReactDOM.render(
     <section id='.container' className={'.child'}>		{/* 直接写样式即可 */}
       {1 + 1 > 2 ? 'M' : 'F'}
     </section>,
     root
   )
   

   

2. 添加 Style【style的值很特殊，需要使用对象作为{}的值】

   // 写法一
   ReactDOM.render(
     <section id='.container' style={{color: 'red', fontSize: '100px'}}>
       {1 + 1 > 2 ? 'M' : 'F'}
     </section>,
     root
   )
   
   // 写法二
   let myStyle = {
     color: 'red', 
     fontSize: '100px',
     width: '100%'
   }
   ReactDOM.render(
     <section id='.container' style={myStyle}>
       {1 + 1 > 2 ? 'M' : 'F'}
     </section>,
     root
   )