当前位置：首页 > article >正文

❤React-JSX语法认识和使用

article 2024/11/18 4:25:03

1、JSX基本使用

JSX是React的核心 JSX是ES的扩展 jsx语法 -> 普通的JavaScript代码 -> babel

React可以使用JSX的前提和原因：

React生态系统支持： 脚手架通常用于构建React应用程序，而JSX是React框架的核心语法之一。因此，脚手架默认支持JSX语法，以便更轻松地编写和管理React组件。
提高开发效率： JSX语法使得在JavaScript代码中编写类似HTML的结构更加直观和便捷，提高了开发者的开发效率和代码可读性。
组件化开发： JSX语法支持组件化开发，使得开发者可以将UI拆分为独立的组件，更好地组织和管理代码结构，提高了应用的可维护性和可扩展性。
工具支持： 脚手架通常配置了相应的编译器或转换工具（如Babel）来将JSX转换为浏览器可执行的纯JavaScript代码，使得开发者可以在开发阶段使用JSX语法，而不必担心浏览器的兼容性问题。

React JSX语法

格外注意：

定义虚拟DOM，不要使用引号。

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写，不仅方便了React应用程序的开发，还提高了开发效率和代码质量。

javascript


var names = ['Alice', 'Emily', 'Kate'];

React.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

javascript


<div id="example"></div>
<script type="text/babel">
  var names = ['Alice', 'Emily', 'Kate'];
  ReactDOM.render(
  <div>
    {
      names.map(function(name,index){
        return <div className="zhan" key={index}>这是{index}:{name} </div>
      })
    }
  </div>,
    document.getElementById('example')
  );
</script>

注意：

document.getElementById('example') 背后不能添加; 这个符号

React的命名

驼峰命名法

想要在返回的div中添加类名：使用className="zhan"而不是class

使用calss会提示

Invalid DOM property `class`. Did you mean `className`?

JSX允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

特殊属性名

1、React的属性名使用驼峰命名法2、特殊属性名：

class=> className
for=>  htmlFor
tabindex=>tabIndex

3、没有子节点的可以以/>结尾

4、推荐：使用小括号包裹JSX，从而避免自动插入分号陷阱

javascript

使用小括号包裹jsx
const div=(<div> hello jsx </div>)

对应的错误：

（1）未使用驼峰命名法

javascript

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
React.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

> 案例:
<div id="example"></div>
<script type="text/babel">
  var names = [
  <span className="zhan" key="1">Alice</span>,
  <span className="zhan" key="2">Emily</span>
  ];
  ReactDOM.render(
  <div>{names}</div>,
  document.getElementById('example')
  );
</script>

2、 JSX之中使用JavaScript表达式

（1） JSX中嵌入javascript表达式

javascript

const reactname='hello react 大雨';
const title=<h1>{reactname}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);

（2） JSX的条件渲染

1️⃣ 条件渲染：

if else 加载中以及加载完成效果

const isloading=true;
const loadData=()=>{
if(isloading) {
return (<div>正在加载中.......</div>)
}
return (<div>欢迎你加载完成!</div>)
};
const title=(<h1className="h1titi">{loadData()}</h1>);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);

2️⃣ 三元表达式

const isloading=false;
const loadData=( )=>{
return isloading?(<div>正在加载中.......</div>):(<div>欢迎你加载完成!</div>);
}
const title=(<h1 className="h1titi">{loadData()}</h1>);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);

3️⃣ 逻辑与运算符

逻辑与运算符是一种中断操作,比如下面的就是当前面成立的时候才执行，否则不执行

const isloading=false;
const loadData=()=>{
return isloading&&(<div>正在加载中.......</div>);
const title=(<h1 className="h1titi">加载效果:{loadData()}</h1>);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);

（3） JSX的列表渲染

map方法

const Arr=[
{name:'11',value: '11'},
{name: '22',value:'2'},
{name: '333',value:'333'},
const list=(
<ul>
{Arr.map(item=><li>{item.name}</li>)}
</ul>
)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(list);

随后我们发现会报错：

翻译过来的意思就是：

注意:渲染列表时应该添加key属性，key属性的值要保证唯一

加上key 属性唯一值，正确同时需要注意的是：尽量避免使用索引号作为key值

const list=(
<ul>
{Arr.map(item=><li
key={item.value};{item.name}</li>)}
</ul>

（4） JSX的样式处理

1️⃣ 行内样式

javascript

{Arr.map(item=
<li
style={{color:'red', backgroundColor:'cadetblue'}}
key={item.value}>{item.name}
</li>)}

2️⃣ 类名（className 推荐的方法）

import React from 'react';
import ReactnoM from 'react-dom/client'; //React 18
import './index.css'  // 引入样式
const Arr=[
    {name:'11',value:'11'},
    {name:'22',value:'2'},
    {name: '333',value:'333'},
]

// title 类名
const list=(
<ul>
{Arr.map(item=>
<li
className='title' !
key={item.value}>
      {item.name})
</li>
</ul>
)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(list);

3、 JavaScript语句和表达式

javascript

复制代码注意区分:【js语句(代码)】与【js表达式】
1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方下面这些都是表达式:
(1).a
(2).a+b
(3).demo(1)
(4). arr.map()
(5).function test(){}2.语句(代码):
下面这些都是语句(代码):
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}

查看全文

http://www.kler.cn/a/398199.html