react 学习笔记（三）：JSX

JSX 基本用法

JSX 是一种 JavaScript 的语法拓展，react 中组件渲染内容通常使用 JSX 表示。

JSX将 html 标签与 JavaScript 表达式混合在了一起，通过 {} 将 JavaScript 表达式嵌入到元素之中。如

const msg = ‘Hello World’;
const element = <h1>{msg}</h1>
ReactDom.render(
	element,
	document.getElementById(‘root’)
)

显示效果

JSX 中显示一组数据

在 JSX 中，如果 {} 的数据是一个数组，那么它的每一项都会被显示出来，如 {[1,2,,3,4,5]},会被显示为

可以利用一组数据显示一组的元素，如

{[1,2,3,4,5].map((item,key)=>{
    return (<li key={key}>{item}</li>)})
}

显示效果

不过需要注意，每个元素都必须有一个不同的key。

JSX 中其他注意点

1. 所有的内容应该被一个根节点包含

2. 在 html 中与 JavaScript 的保留字重合的属性需要使用其他不冲突的名字，如 class 需要替换为 className， for 需要替换为 htmlFor

3. style 中的内容不能是字符串，而应该是一个 js 的对象，如style = "color:red"应该 替换为 style = {{"color":"red"}}