React JSX 语法

JSX

延续上一节的内容。render 代码块的内容，有一套模仿 HTML、CSS、JavaScript 的 React 独创语法，叫做 JSX 语法，它有以下几个特点。

变量

// JSX 支持定义变量

class Index extends Component {
  render() {

    var Components = <Header />
    var text = 'hello react'

    return (
      <div>
        {Components}
        <h1>{text}</h1>
      </div>
    )
  }
}

样式

// 支持 CSS 样式，但是有自己独特的语法 “驼峰式 + JSON” 风格

class Index extends Component {
  render() {
    var css = {
      fontSize: '20px',
      textDecoration: 'underline'
    }

    return (
      <div>
        <p style={css}>css1</p>
        <p style={{'color': 'red'}}>css2</p>
      </div>
    )
  }
}

三元表达式

class Index extends Component {
  render() {
    return (
      <div>
        {true ? 1 : 2} {/* 这个特性可以通过条件判断决定使用哪个组件 */}
      </div>
    )
  }
}

迭代

class Index extends Component {
  render() {
    return (
      <div>
        {[1,2,3].map((i) => {
            return (<p>{i}</p>) // 遍历出三个 p 元素
        })}
      </div>
    )
  }
}

注释

class Index extends Component {
  render() {
    return (
      <div>
        {/* 这是 JSX 独特的注释语法 */}
      </div>
    )
  }
}