JSX语法和React组件

最新推荐文章于 2024-05-09 13:02:08 发布
最新推荐文章于 2024-05-09 13:02:08 发布
阅读量336 收藏 1
点赞数 1
文章标签： javascript react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/123310147
版权

目录

一、JSX语法

1、JSX的算术表达式

2、条件表达式

3、嵌入表达式

4、对象表达式

5、函数表达式

6、数组表达式

7、样式表达式

8、注释表达式

二、React组件

1、函数组件

​2、类组件

3、组件的组合

一、JSX语法

JavaScript XML，jsx是JavaScript的语法的扩展,支持自定义属性；是react的内置的语法，其基本语法格式为

const 元素名 = (
	<根标签名>
		<子标签></子标签>
	</根标签名>
);

（1）创建元素时必须有一个根标签,该根标签是一个容器,里面可以包含其他的标签

（2）在react的脚手架项目中可以使用空标签(<></>)作为根标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSX语法</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let div = document.getElementById('root');
        //通过jsx语法创建一个元素
        const element = (
            <span>
                <h3>新年快乐!</h3>
                <p>虎虎生威</p>
            </span>
        );
        //调用render函数将element渲染到也中
        ReactDOM.render(element,div);
    </script>
</body>
</html>

1、JSX的算术表达式

使用大括号({}),可以解析算术表达式。在{}中放算术表达式即可

2、条件表达式

JSX不支持if语句,但可以使用条件表达式来替代if

3、嵌入表达式

先定义变量,然后在{}中使用变量

4、对象表达式

在{}中可以直接以'对象名.属性'方式访问对象

5、函数表达式

可以通过函数的调用来实现对if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSX语法</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let div = document.getElementById('root');
        //通过jsx语法创建一个元素
        let k = 21;
        let userInfo = {
            userName: '小森',
            userAge: 45,
            userAddress: '杭州'
        }

        function showUserInfo(user){
            return '姓名：'+user.userName+'\t年龄：'+user.userAge+'\t地址：'+user.userAddress
        }

        function chooseUser(user){
            if (user) {
                return showUserInfo(user)
            }else{
                return '用户信息为空'
            }
        }
        const element = (
            <div>
              <h3>新年快乐!</h3>
              <p>虎虎生威</p>
              <p>{ 3+5 }</p>
              <p>条件表达式：{ k % 2==0?'虎年吉祥':'虎虎生威' }</p>
              <div>用户信息：
                <p>{ chooseUser(userInfo) }</p>
                <p>{ chooseUser() }</p>
              </div>
            </div>
        );
        //调用render函数将element渲染到也中
        ReactDOM.render(element,div);
    </script>
</body>
</html>

6、数组表达式

在数组中存放标签,在{}中解析数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSX表达式</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');

        const arr = [
            <p>十二生肖：</p>,
            <p>子鼠丑牛寅虎卯兔</p>,
            <p>辰龙巳蛇午马未羊</p>,
            <p>申猴酉鸡戌狗亥猪</p>
        ]

        const span = (
            <span>
                <h3>JSX的数组表达式：</h3>
                <p>{ arr }</p>
            </span>
        );

        ReactDOM.render(span,root)
    </script>
</body>
</html>

 

7、样式表达式

将CSS样式应用到虚拟DOM中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSX样式表达式</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        //1、定义样式对象
        const style1= {
                css1:{
                    fontSize: 25,
                    fontStyle: 'bold',
                    color: 'red'
                },
                css2: {
                    fontSize: 15,
                    fontStyle: 'normal',
                    color: 'green'
                },
                css3: {
                    fontSize: 10,
                    fontStyle: 'italic',
                    color: 'blue'
                }
        }
        
        //2、创建DOM
        const element = (
            <div>
                {/* 创建根标签 */}
                <p style={ style1.css1 }>小森</p>
                <p style={ style1.css2 }>小华</p>
                <p style={ style1.css3 }>小源</p>
            </div>
        )
        //3、将虚拟的DOM渲染到页面中
        ReactDOM.render(element,root)
    </script>
</body>
</html>

 

8、注释表达式

在JSX元素中(虚拟DOM)中进行注释，使用的格式是{/*注释内容*/}

二、React组件

React组件可以将UI切分成一些独立的、可复用的部件

1、函数组件

基于ES6的函数。轻量级组件(不占用内存空间)、React官方提倡使用

（1）定义函数组件

function fun(){
	return <标签></标签>
}

（2）使用：将函数名当做标签使用

<fun />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数组件</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        //1.创建函数组件
        function ShowTag(){
            return (
                <div>
                    <p>中华上下五千年</p>
                    <button>提交</button>
                </div>
            );
        }
        //2.创建虚拟DOM
        const reactSpan = (
            <span>
                <ShowTag /> {/* 实际是对函数的调用 */}
            </span>
        )
        //3.将虚拟的DOM渲染到页面中
        ReactDOM.render(reactSpan,root)
    </script>
</body>
</html>

2、类组件

（1）定义：


class 类名 extends React.Component{
	属性;
	render(){
		return <标签></标签>
	}
}

（2）使用方式：<类名 />

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类组件</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');

        //1.创建类组件
        class ShowTag extends React.Component{
            render(){
                return (
                    <div>
                        <p>所爱隔山海</p>
                        <p>山海不可平</p>
                    </div>
                );
            }
        }
        //2.创建虚拟的DOM
        const element = (
           <span>
              <ShowTag /> {/* 实际是创建了类的对象(实例) */}
           </span>
        )
        //3.渲染
        ReactDOM.render(element,root)
    </script>
</body>
</html>

3、组件的组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的组合</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let root = document.getElementById('app');
        //1.创建函数组件
        function FormTitle(){  //标题组件
            return (
                <h3>用户登录</h3>
            )
        }

        function UserId(){   //用户ID组件
            const userId = (
                <p>用户ID：<input type='text'/></p>
            )
            return userId;
        }

        function UserName(){ //用户名组件
            const userName = (
                <p>用户名：<input type='text'/></p>
            )
            return userName;
        }

        function UserPwd(){ //密码组件
            const userPwd = (
                <p>密码：<input type='password'/></p>
            )
            return userPwd;
        }

        function Submit(){ //按钮组件
            return (
                <button>登录</button>
            )
        }

        //2.将函数组件组合成一个组件
        function FormLogin(){
            return (
                <div>
                    <FormTitle />
                    <UserId />
                    <UserName />
                    <UserPwd />
                    <Submit />
                </div>
            )
        }

        //3.渲染
        ReactDOM.render(<FormLogin/>,root)
    </script>
</body>
</html>

 

Han_Zhou_Z
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS教程之 JSX 和React
iCloudEnd的博客
06-23 335
JSX 代表JavaScript XML，它是一种创建元素的方法，以在反应应用程序中用作模板。使用 JSX 创建的元素类似于 HTML 代码。这样，您可以使开发过程更加简单和直观地创建组件。但是浏览器无法解释 JSX。因此，有必要使用转译器来执行此转换。目前，最著名的是巴别塔。 所有 JSX 都转换为 React 创建元素的原始方式。但是，以原始形式创建元素会使开发更加复杂和冗长。让我们看一下 JSX 语法。正如我们所见，JSX 只是 Javascript，而 JavaScript 使用驼峰式命名约定，所以
React技术栈 --》 JSX语法书写JS和React创建组件 ## Day3
ztK63LrD的博客
06-19 963
带你深入了解React框架搭建，保姆级学习。
React基本使用----组件
grow_的博客
09-28 1098
React----组件化
2024年React全家桶(技术栈)_react全家桶包括哪些技术，2024年最新大数据开发模块化面向接口编程
最新发布
2401_84166811的博客
05-09 484
1.
React组件
老电影故事的博客
10-08 730
在React hook出来之前，函数式组件是没有自己的状态的，所以我们统一通过类组件来讲解。
React入门五：事件处理
qq_39008205的博客
07-13 395
这里写目录标题1. 事件绑定2. 事件对象3. 有状态组件和无状态组件4. 组件中的state 和setState()4.1 state的使用4.2 setState()修改状态4.3 从JSX中抽离事件处理程序5. 事件绑定this指向5.1 箭头函数5.2 Function.prototype.bind()5.3 class的实例方法 （推荐使用）6. 表单处理6.1 受控组件6.2 非受控组件 1. 事件绑定 React事件绑定语法与DOM事件语法相似 如法：on+事件名称 = {事件处理程序}
React JSX语法使用案例
04-21
React JSX语法使用案例，使用前需要 cnpm install 安装组件
landau:具有JSX语法和类似React的组件系统的OpenJSCAD
04-29
：用于渲染和检索有关Landau模型的信息的服务器。 是构建与Landau相关的GUI和非JS应用程序的良好基础。 ：基于Eletron的查看器，提供渲染的Landau模型的实时视图。 执照 已获得MIT许可（请参阅或 ）。
JavaScript的React框架中的JSX语法学习入门教程
10-22
JSX的引入使得React组件的编写更加直观和易读，但需要注意的是，JSX并非真正的XML，而是一种编译时的语法糖，最终会被转换为JavaScript。 在React中，我们可以创建一个组件，然后用JSX来定义其结构。例如： ```...
实例讲解React 组件
10-15
React组件有两种主要的定义方式：函数组件和类组件。在上面的实例中，我们看到了两种定义组件的方式： 1. **函数组件**： ```jsx function HelloMessage(props) { return <h1>Hello World!; } ``` 这是一种...
02 React目录结构分析 、创建组件、 JSX语法、 绑定数据 绑定对象
03-01
02 React目录结构分析 、创建组件、 JSX语法、 绑定数据 绑定对象
React进阶之路（一）-- JSX基础、组件基础
十八岁讨厌编程的博客
11-07 570
本文涉及React的介绍、开发环境搭建、JSX基础、组件基础和一个联手小项目。
vue中的JSX和函数式组件
悦.L的博客
12-27 1692
上一篇我们讲解了vue中使用 render 函数创建HTML，在创建过程比较复杂，而且模板中的 DOM 结构可读性差。那么这一篇我们主要了解JSX和函数组件 JSX JSX全称是JavaScript XML，是一种JavaScript语法扩展，用于描述用户界面。其格式比较像是模板语言，但事实上完全是在JavaScript内部实现的。 JSX语法用于简化模板的编写，使得模板的编写变得和普通 DOM 模板一样简单。在 Vue.js中，想要使用 JSX 语法就必须下载 Babel 插件。 将如下 DOM 结构.
【React入门必备知识篇02】--- React 组件基础，前端常用面试
2401_83974639的博客
04-10 302
组件是 React 的一等公民，使用 React 就是在用组件；组件表示页面中的部分功能；组合多个组件实现完整的页面功能；特点：可复用、独立、可组合；其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。
React学习笔记01---jsx基础语法规则、函数式组件与类式组件
m0_55842907的博客
05-20 757
前言:最近跟着教程把react相关的教程过了一遍，本专栏博客是为了系统的梳理一下相关的内容知识点，将保持在每周2-3篇的更新频率，系统的将react的知识内容复习一遍，其中穿插着一些和js相关的补充知识点有助于对js的强化。纯属个人笔记内容记录，如有错误之处，还望大家在评论区留言指正。 一、JSX基础语法规则 1.1 什么是JSX? 什么是JSX呢？JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素...
什么是JSX?在React中使用JSX
G-god的博客
04-27 7401
(纯手打，如有错误的地方在下方评论，3Q)什么是JSXJSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX。这个是官网：http://facebook.github.io/jsx/举个栗子，在...
React入门（JSX与组件）
YanHSama的博客
04-13 324
1、简单示例 <div id="box"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-do...
渲染函数和JSX(二)函数式组件
qq_40547061的博客
04-22 345
2.函数式组件 3.JSX 4.作用域插槽
reactjs定义组件：函数式组件
学亮编程手记
02-27 424
执行了ReactDOM.render(…之后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_函数式组件</title> </head> <bo
什么是JSX语法？什么是React组件
08-24
JSX是JavaScript语法扩展，用于在React中编写UI组件。它允许我们在 JavaScript 代码中编写类似HTML的结构，将组件的结构和逻辑紧密地组合在一起。 React组件是构建用户界面的独立、可重用的代码片段。它们将界面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值