【03】React中JSX语法

jsx特点：
a、jsx可以直接创建组件，直接写组件的html
b、有且仅有一个父级
c、添加class名时，由class变为 className
d、label标签 里的for 属性变为 htmlFor
e、表达式 { } ，写变量
f、循环可以直接写在{ } 里面，完全是js的形式写法

jsxStudy.js

//引入 react
import React,{Component} from 'react';
//创建组件
class JsxStudy extends Component{
    constructor(...props){
        super(...props)
        this.str = '梦中不知岁已老，朦胧人间谁登高。'
        this.numbers = [10,20,30]
    }
    //有且仅有一个父级
    render(){
        return(
            <div>
                {/*添加class名时，由class变为className*/}
                <p className="active">风飘飘，雪遥遥。</p>
                {/*变量写在 {} 里*/}
                <p>{this.str}</p>
                {/*label标签 里的for 属性变为 htmlFor*/}
                <label htmlFor="aaa">点我也能选中</label>
                <input type="checkbox" id="aaa"  />
                {/*循环可以直接写在{ }里面，完全是js的形式写法*/}
                <ul>
                    {
                        this.numbers.map((val)=>{
                            return <li key={val}>{val}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
//导出组件
export default JsxStudy;

 

效果：