React中 JSX语法

jsx语法

React里面写模板要使用jsx语法,他其实和html很相似但是又不太一样.

使用一个父节点包裹

jsx中不能一次性返回零散的多个节点,如果有很多个节点,需要包含在一个父节点中

 return (
            <div>
                 <p>推荐</p>
                 <p>推荐</p>
                 <p>推荐</p>
                 <p>推荐</p>
            </div>

        )

{ } 的作用

可以写一些js的变量或者表达式,注意return的注释写法

render() {
        var m = 100
        return (
            <div>
              <p>{this.props.title}</p>
              {/*js注释*/}
              <p>{m = 100 ? '一百' : ''}</p>
            </div>

        )
    }

样式

className代替class,也可以用{ }形式,其中注意font-size等连字符写成fontSize驼峰命名

class List extends React.Component {
    render() {
        var s = {
            fontSize:'50px',
            color: '#f00'
        }
        return (
            <div>
                <p className='title'>列表</p>
                <p style={s}>列表</p>
            </div>

        )
    }
}

事件

拿click来说,要在标签上绑定click事件,写成这样,注意.bind(this)的使用

 render() {
        return (
            <div>
                <Header title="hello页面"/>
                <p onClick={this.clickHandler.bind(this)}>hello world {this.state.now}</p>
            </div>
        )
    }
    // 定义方法是在render同级别内
    clickHandler() {
        this.setState({
            now: Date.now()
        })
    }

循环

在jsx循环,一般会用到Array.prototype.map(来自ES5标准)

class List extends React.Component {
    render() {
        var arr = ['aa','bb','cc']
        return (
            <div>
                <p>列表2</p>
                <ul>
                    {arr.map((item,index) => {
                        return <li key={index}>{item}</li>
                    })}
                </ul>
            </div>

        )
    }
}

注意: arr.map是包裹在{ }内的,key={index}是react要求的,记得要写return