React JSX语法基础

一、注释

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

{/*注释*/}

二、类名属性

以下都会用到的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 (
            
测试类名
        )
    }
}

如图所示，样式生效了

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 (
            
测试类名
        )
    }
}

千万要注意：
className={this.state.stateClass}不可以习惯性加上双引号""，如className="{this.state.stateClass}"，
因为编辑器会误认为双引号""里的都是字符串，那么编译后得到的是

测试类名

而不是我们想要的

三、行内样式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 (
            

                
测试类名
                
测试类名
            
        )
    }
}

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 (
            

                
测试类名
                
测试类名
            
        )
    }
}

样式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 (
            

                姓名：
                
            
        )
    }
}

点姓名文字的时候，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 (
            

                {/*ES6 import 引入*/}
                
                {/*ES5 require 引入*/}
                
            
        )
    }
}

左边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 
{item}
        })
        return (
            

                

                    {listResult}
                
            
        )
    }
}

如图所示

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
]
        }
    }

    render() {
        return (
            

                

                    {
                        this.state.list.map((item, key) => {
                            return 
{item}
                        })
                    }
                
            
        )
    }
}

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 (
            

                

                    {
                        this.state.list.map((item, key) => {
                            return (
                                

                                    
我是{item.name}
                                    
今年{item.age}岁了
                                
                            )
                        })
                    }
                
            
        )
    }
}

添加key={key}以免报错