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;
效果: