React JSX语法基础

一、注释

写在JSX的HTML标签里的注释格式应包裹在{}里，即为：

<div>
{/*注释*/}
</div>

二、类名属性

以下都会用到的CSS文件：/src/assets/css/test.css

.test-class {
    color: red;
}

1.静态类名class

React组件：/src/component/Test.js

import React, {Component} from 'react'
import '../assets/css/test.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            //
        }
    }

    render() {
        return (
            <div className="test-class">测试类名</div>
        )
    }
}

如图所示，样式生效了

2.动态类名--与数据绑定

React组件：/src/component/Test.js

import React, {Component} from 'react'
import '../assets/css/test.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            stateClass: 'test-class'
        }
    }

    render() {
        return (
            <div className={this.state.stateClass}>测试类名</div>
        )
    }
}

千万要注意：
className={this.state.stateClass}不可以习惯性加上双引号""，如className="{this.state.stateClass}"，
因为编辑器会误认为双引号""里的都是字符串，那么编译后得到的是<div class="{this.state.stateClass}">测试类名</div>而不是我们想要的<div class="test-class>测试类名</div>"

三、行内样式style

行内样式style的属性名与原来一样，但是写法却不一样了，要写成对象的形式。

1.静态样式style

import React, {Component} from 'react'
import '../assets/css/test.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            stateClass: 'test-class'
        }
    }

    render() {
        const objStyle = {
            color: 'pink'
        }
        return (
            <div>
                <div style={objStyle}>测试类名</div>
                <div style={{'color': 'red'}}>测试类名</div>
            </div>
        )
    }
}

2.动态类名--与数据绑定

import React, {Component} from 'react'
import '../assets/css/test.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            stateClass: 'test-class',
            stateStyle: {
                color: 'red'
            }
        }
    }

    render() {
        const objStyle = {
            color: 'pink'
        }
        return (
            <div>
                <div style={objStyle}>测试类名</div>
                <div style={this.state.stateStyle}>测试类名</div>
            </div>
        )
    }
}

样式style

四、label中的for

要将for改为htmlFor

import React, {Component} from 'react'
// import '../assets/css/test.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            //
        }
    }

    render() {
        return (
            <div>
                <label htmlFor="name">姓名：</label>
                <input id="name"/>
            </div>
        )
    }
}

点姓名文字的时候，input框能选中

五、引入本地图片

有两种方法，ES5的require以及ES6的import

import React, {Component} from 'react'
import '../assets/css/test.css'
import logo from '../logo.svg';

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            //
        }
    }

    render() {
        return (
            <div>
                {/*ES6 import 引入*/}
                <img src={logo} className="img"/>
                {/*ES5 require 引入*/}
                <img src={require('../logo.svg')} className="img"/>
            </div>
        )
    }
}

左边require引入，右边import引入

六、循环数组

1.在render(){}里，return()外循环

import React, {Component} from 'react'
// import '../assets/css/test.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: ['1111', '2222', '3333']
        }
    }

    render() {
        const listResult = this.state.list.map((item, key) => {
            return <li key={key}>{item}</li>
        })
        return (
            <div>
                <ul>
                    {listResult}
                </ul>
            </div>
        )
    }
}

如图所示

2.直接循环，用{}包裹住JS代码

import React, {Component} from 'react'
// import '../assets/css/test.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [<h2>我是一个h2</h2>, <h2>我也是一个h2</h2>]
        }
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.list.map((item, key) => {
                            return <li key={key}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

JSX中支持HTML数组

返回的是多行，用()包裹

import React, {Component} from 'react'
// import '../assets/css/test.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [
                {
                    name: '张三',
                    age: 10
                },
                {
                    name: '李四',
                    age: 11
                }
            ]
        }
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.list.map((item, key) => {
                            return (
                                <div key={key}>
                                    <h4>我是{item.name}</h4>
                                    <h4>今年{item.age}岁了</h4>
                                </div>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

添加key={key}以免报错