JSX运用

JSX

且看这段代码,并不符合我们认识的javascript语法,好像在javascript中加载了html(xml),但是它却能(经过babel的解析)正确工作.

class HelloWorld extends React.Component {
      render(){
        return  <div>{msg}</div>  
      }
}

这种语法我们称为JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。

JSX中嵌入表达式

在JSX中,我们可以在**{}**中书写表达式. 我们列举几种情况,来说明 JSX中的语法规则. JSX应该嵌入js表达式,什么是表达式呢?

表达式是由运算符构成，并运算产生结果的语法结构 .

*例子1: *
声明变量,没有返回值,无法正确渲染:

class HelloWorld extends React.Component {
      render(){
        return (
          <div>
            { var a = 10  }
          </div>
        )
      }
    }

直接使用,或者三元表达式,可以正确渲染:

class HelloWorld extends React.Component {
      render(){
        return (
          <div>
            { 10 }
          </div>
        )
      }
    }

class HelloWorld extends React.Component {
      render(){
        return (
          <div>
            { 1>0?10:20 }
          </div>
        )
      }
    }

*例子2: *
直接渲染对象,和直接渲染函数,都会报错:

class HelloWorld extends React.Component {
      render(){
        return (
          <div>
            { new Date() }
          </div>
        )
      }
    }

class HelloWorld extends React.Component {
      render(){
        return (
          <div>
            { ()=>2 }
          </div>
        )
      }
    }

 

获得转换后的结果,返回字符串类型,可以正确渲染:

class HelloWorld extends React.Component {
      render(){
        return (
          <div>
            { new Date().getTime() }
          </div>
        )
      }
    }

例子3: **
for循环没有产生结果,所以不是表达式**:

class HelloWorld extends React.Component {
      render(){
        return (
          <ul>
            for(var i = 0 ; i < 10 ; i ++){
              <li>{i}</li>
            }
          </ul>
        )
      }
    }

如果采用map,本身会返回内容,则可以正确渲染:
这里为了避免报错,key暂且使用下标.

class HelloWorld extends React.Component {
      render(){
        return (
          <ul>
            {
              Array(10).fill(null).map((item,index)=>(
                <li key={index}>{index}</li>
              ))
            }
          </ul>
        )
      }
    }

例子4: **
if逻辑判断语句,没有返回内容,则不会正确渲染**:

class HelloWorld extends React.Component {
      render(){
        return (
          if(true){
            <div>今天好心情!</div>
          }else{
            <div>今天很生气!</div>
          }
        )
      }
    }

三元运算符,会产生结果,可以正确渲染:

class HelloWorld extends React.Component {
      render(){
        return (
          1>2? (<div>今天好心情!</div>): (<div>今天很生气!</div>)
        )
      }
    }

例子4: **
对象渲染,采用forEach对属性进行遍历,因为forEach**返回值为undefined,所以无法得到正确结果:

var user = {
      name: '张三',
      age: 20,
      sex: '男'
    }
// 直接渲染对象会报错
class HelloWorld extends React.Component {
      render(){
        return (
          <div>
            { user }
          </div>
        )
      }
    }
// 或者
class HelloWorld extends React.Component {
  render(){
    return (
      <div>
        {
          Object.keys(user).forEach(item=>{
            <p>{item}</p>  
          })
        }
      </div>
    )
  }
}

采用map,可以得到返回值,可以正确渲染:

var user = {
      name: '张三',
      age: 20,
      sex: '男'
    }
    class HelloWorld extends React.Component {
      render(){
        return (
          <div>
            {
              Object.keys(user).map(item=>(
                  <p>{item}</p>  
              ))
            }
          </div>
        )
      }
    }

*例子5: *
数组可以直接渲染:

var arr = [1,2,3,4];
    class HelloWorld extends React.Component {
      render(){
        return (
          <div>
            { arr }
          </div>
        )
      }
    }

JSX的样式

style行内样式:
style是个双{},因为首先需要定义一个js表达式作用域,然后style属性接收一个对象类型.样式名需要转换为驼峰形式.

var arr = [1,2,3,4];
class HelloWorld extends React.Component {
  render(){
    return (
      <div style={{color: 'red',fontSize: '20px'}}>
        { arr }
      </div>
    )
  }
}
// 或者
var arr = [1,2,3,4];
var style = {color: 'green',fontSize: '20px'};
class HelloWorld extends React.Component {
  render(){
    return (
      <div style={style}>
        { arr }
      </div>
    )
  }
}

class样式:
在JSX中,属性不应该采用关键词,比如class,if,for等,样式应该书写在 className中:

<style>
    .danger{
      color: red;
    }
    .large{
      font-size: 30px;
    }
</style>

class HelloWorld extends React.Component {
      render(){
        return (
          <div className={'danger large'}>
            { arr }
          </div>
        )
      }
}

JSX中的注释

// 这种注释是不行的 
class HelloWorld extends React.Component {
      render(){
        return (
          <div className={'danger large'}>
            // className和class属性是一样的,而且必须是驼峰
            { arr }
          </div>
        )
      }
    }
// 必须把注释部分变成表达式作用域,再注释
class HelloWorld extends React.Component {
      render(){
        return (
          <div className={'danger large'}>
            { /* className和class属性是一样的,而且必须是驼峰 */ }
            { arr }
          </div>
        )
      }
    }

JSX中的属性
JSX中的属性,必须采用驼峰命名: