React学习之旅Part3：React中JSX语法的使用(渲染数字、渲染字符串、渲染布尔值、为属性绑定值、渲染JSX元素、渲染JSX元素数组、将普通字符串数组转换为JSX数组并渲染)及注意事项

Piconjo_Official

于 2020-06-07 17:14:32 发布

阅读量2.5k

点赞数 1

分类专栏：前端文章标签： javascript js react reactjs jsx

本文链接：https://blog.youkuaiyun.com/Piconjo/article/details/106603325

版权

本文详细介绍了React中JSX的使用，包括渲染数字、字符串、布尔值，为属性绑定值，渲染JSX元素和数组，以及如何将普通字符串数组转换为JSX数组并渲染。同时，强调了注意事项，如 JSX 的严格闭合规则、注释方式、className和htmlFor的使用，以及需要有唯一根元素的要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSX语法可以：

可直接将标签放入render()方法中：
该标签经过Babel的转换后不是一个HTML标签了而是一个对象

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<div>我是帅哥</div>,document.getElementById("app"))

(类似于Vue的插值表达式)

let a=10;
ReactDOM.render(<div>{
   a}</div>,document.getElementById("app"))

在花括号内还可进行基本表达式运算
比如：

let a=10;
ReactDOM.render(<div>{
   a+12}</div>,document.getElementById(