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 中其他注意点
-
所有的内容应该被一个根节点包含
-
在 html 中与 JavaScript 的保留字重合的属性需要使用其他不冲突的名字,如 class 需要替换为 className, for 需要替换为 htmlFor
-
style 中的内容不能是字符串,而应该是一个 js 的对象,如
style = "color:red"
应该 替换为style = {{"color":"red"}}