React--6.在jsx中书写js代码

最新推荐文章于 2022-08-21 17:59:02 发布

原创最新推荐文章于 2022-08-21 17:59:02 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

React.js 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了在React的jsx语法中如何书写js代码，包括jsx本质的转换过程、混合js表达式的方法、注释的添加方式、class与属性绑定、jsx元素的唯一根节点原则以及标签的正确使用规范。

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

1.jsx语法的本质：不是直接把jsx渲染到页面上，而是在其内部先转换成createElement的形式，再进行渲染；

2 在jsx中混合写入js表达式：在jsx语法中，需要把代码写到{}中
应用举例：

渲染数字：
渲染字符串
渲染布尔值
为属性绑定值
渲染jsx元素
渲染jsx数组
将普通字符数组转换为jsx数组并渲染到页面上

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

let a = 10;
let str = '你好';
let boo = true;
let title ='999';
const h1=<h1>哈哈哈哈哈哈哈哈哈</h1>;
const arr =[
    <h2>我是h2</h2>,
    <h3>我是h3</h3>
];
const arrStr =['孙悟空','猪八戒','唐僧','沙僧'];
//方法一：定义一个空数组，将来用来存放名称标签
const nameArr = []
arrStr.forEach(item => {
   const temp = <h5>{item}</h5>
   nameArr.push(temp)
});

/*数组的map方法,map中必须要写return 
 const res = arrStr.map(item=>{
    return item +'__'
})
 console.log(res)*/


//JSX xml比HTML严格多了
//需要使用花括号{}的情况：当我们JSX控制的区域内写一些JS表达式，则需要把代码写在花括号里面
ReactDOM.render(<div>
    {a+2}
    <hr/>
    {str}
    <hr/>
    {boo?'条件为真':'条件为假'}
    <hr/>
    <p title={title}>我是p标签</p>
    <hr/>
    {h1}
    <hr/>
    {arr}
    <hr/>
    {nameArr}
    <hr/>
    {arrStr.map(item=>{
        return <h3>{item}</h3>
    })}
    </div>,document.getElementById('app'))

在这里插入图片描述
3.在JSX中写注释，注释的两种方法：
{//} 单行注释
{/**/} 多行注释

4 .为JSX的元素添加class类名：
需要使用className来代替class
for需要用htmlFor来代替

<p className = "myp">这是一个p标签</p>
<label htmlFor>1111</label>

在这里插入图片描述
5.在JSX中创建DOM的时候，所有的节点，必须要有唯一的根元素进行包裹

6 .在JSX语法中，标签必须成对出现，如果是但标签，则必须使用自闭合，如：<hr/>