JSX语法

class -> className

const Home = (props) => {
    return (
      <div className="active" >hello world</div>
    )
}

三元表达式(三目): jsx中任何遇到js的地方都要加{}

expression?a:b;

const Home = (props) => {
    return (
      <div className={a>0?"active":""} >hello world</div>
    )
}

这里的比较用的是 ===

import React, { Component, Fragment } from 'react'

class Father extends Component {
    constructor(props){
        super(props);
        this.state = {
            model:1
        }
    }
    render(){
        const { model } = this.state;
        return (
         <Fragment>
             {
               model===1?
               <div>
                  {/*这里多复杂都可以,不支持if*/}
                  model是1
               </div>
                :
               <div>
                  model不是1
                  {/*这里多复杂都可以*/}
               </div>
             }
         </Fragment>
        )
    }
}

style: {{}}

最外面的{}表示这里是js,内部的{}表示传的是一个对象

const Home = (props) => {
    return (
      <div style={{background:"red",color:"#f60"}} >hello world</div>
    )
}