react学习笔记 item3 --- 组件的创建方式

最新推荐文章于 2024-06-08 12:33:18 发布
最新推荐文章于 2024-06-08 12:33:18 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： React 文章标签： react 组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014607184/article/details/53230272
版权

前面我们说到了 react 的核心在于组件，可以把实现一定功能或者模块进行封装，然后通过不同的组件之间的组合构成一下完整的项目。下面介绍了一下组件的基本使用方法。

不使用JSX 语法也能创建 react 组件，但是由于react 团队推荐我们使用 JSX， 我的上一篇博文中也介绍了 JSX 的优势以及基本的语法。因此这里我简单的介绍一下使用JSX来创建组件的方法。

1、React.createClass

利用React.createClass定义的组件是es5原生方式。需要注意的是：

  • 原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头；

  • 组件类只能包含一个顶层标签，否则也会报错；

  • 对自定义组件实例化时，要保证标签闭合。

下面我们创建一个 HelloMessage 组件，用来展示相关的信息，其形式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个react程序</title>
    <script type="text/javascript" src="lib/react.js"></script>
    <script type="text/javascript" src="lib/react-dom.js"></
最低0.47元/天 解锁文章
诗渊
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React项目优化(6)-表单中组织表单元素(FormItem)的三种方案
军火库
08-16 1784
在笔者使用React开发PC端后台管理系统和资金业务系统的过程中，使用最普通，最常见的组件就是表格组件Form及表单组件Table。由于业务比较复杂，导致每一个表单或表格都会有很多元素组成。而系统中又又很多的表单或表格。那么，如何组织表单元素，看似简单，实则对整个项目的开发过程影响重大。合理的表单组织方式，能够减少繁琐的工作量，能够快速的定位问题，处理问题。本文中，笔者结合自己的项目实践，向大家展示三种在复杂表单中组织表单项的方式。1.基于表单及表格元素的组织方式仁者见仁，智者见智。...
react学习笔记 item1 --- 基础入门
诗渊的博客
11-13 1004
React 是一个用于构建用户界面的 JAVASCRIPT 库，起源于 Facebook 的内部项目。本文对react进行了一个基本的介绍，给出了第一个简单的react示例。
React基础
miracle5220的博客
09-29 547
React基础
React函数组件实现获取子组件标签（forwardRef的使用）
Li_na_na01的博客
05-31 1717
需求说明 父组件触发事件改变子组件的状态 举例 例子： 切换父组件tab时，重置子组件表单。在第一个tab下的搜索表单填写的搜索条件，在切换tab时，需清空表单内容 代码结构 const parent = () => { return ( <> <Tabs onChange={changeTabs}> {tabsList?.map((tabItem: tabItem) => <TabPane tab={tabI
react的自定义组件
最新发布
qq_36935391的博客
06-08 407
自定义组件 就是 自己创建一个首字母大写的function方法，引用的话就是自闭和标签或者成对的标签引用就行。
React 基本用法
王秀龙
09-03 314
React 基本用法 一、语法 元素 用 className 来代替 class <div className="App"></div> htmlfor 替换 lable 的 for 属性 <label htmlFor='0'></label> 标签 标签必须成对出现，如果是单标签，则必须自闭和 注释 推荐使用 {/* 这是注释 */} ，也可也用 //这是注释 /* 这是注释 */ //这是注释 当编译引擎，在编译 JSX 代码的时候，如果遇到了
react-horizontal-scrolling-menu:React的水平滚动菜单组件
04-18
npm install --save react-horizontal-scrolling-menu 在项目中： import React , { Component } from 'react' ; import ScrollMenu from 'react-horizontal-scrolling-menu' ; import './App.css' ; // list o
react-carousel-3d:React中的 3D carousal 组件
07-23
演示 jsfiddle ( )安装新产品经理 npm i 3d-react-carousal纱 yarn add 3d-react-carousal在 public.html 中为箭头添加 fa-css <link href=...
react-d3-tree:React组件创建交互式D3树形图
04-30
ReactD3树 React D3 Tree是一个组件，可让您利用的tree布局，以最小的设置将层次结构数据（例如，族谱...import Tree from 'react-d3-tree' ; // This is a simplified example of an org chart with a depth of 2
react-native-toast-message：动画的Toast消息组件，可以强制调用
02-05
命令式API 键盘感知灵活的配置安装yarn add react-native-toast-message用法在应用程序入口文件中渲染Toast组件（以及在那里可能呈现的所有内容），并为其设置引用。 // App.jsximport Toast from 'react-native-...
react-native-ui-lib：React Native的UI组件库
02-01
只需3个简单的步骤即可创建自己的设计系统 步骤1 加载您的基础和预设（颜色，版式，间距等） // FoundationConfig.js import {Colors, Typography, Spacings} from 'react-native-ui-lib'; Colors.loadColors({ ...
React学习之路 二（React自定义组件）
Dmh_68009的博客
02-14 2855
一、React自定义组件 1.1，函数式声明组件 顾名思义，就是将一个函数作为一个组件 <div id="test1"></div> <script type="text/babel"> /** * 1.声明一个简单的函数式组件 */ function MyComponent(){ return ( <div> <h3>我是函数式声明的组件</h3>
第五章 在React中如何定义组件
天界程序员的博客
02-14 1038
了解react定义组件的两种方式：函数式组件和类式组件，以及他们之间的区别做一些总结
【React】定义组件的两种方式
z914020826的博客
03-04 888
一、函数式组件定义一个组件最简单的方法就是写一个JavaScript函数//1.创建函数式组件 function MyComponent() {//此处的this是undefined，因为babel编译后开启了严格模式 return < h2 > 我是用函数定义的组件(适用于【简单组件】的定义) < / h2 > } //2.渲染组件到页面 ReactDOM . render(< MyComponent / > , document . getElementById('test'))
React 组件的两种定义方式
火星基地
03-30 703
1. 函数式组件 <div id="test"></div> <script type="text/babel"> //1.创建函数式组件 function MyComponent() { console.log(this); // 此处的this是undefined，因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件</h2>; } //2.渲染组件到页面 ReactDOM.render(<My
React组件--从创建组件开始手把手教学
Little_Fish_KEKE的博客
02-23 888
React从类组件介绍和创建开始，多种案例搭配，快速学会react的组件使用
ReactNative进阶（四十七）：自定义组件
IT全栈 华强工作室
09-13 2218
组件分为类组件和函数组件。实现组件需要实现什么效果;组件基本逻辑是怎样的；继承Component或实现render()方法;定义组件属性字段及其类型，以及是否必须，如不必须则默认字段值是什么;绑定点击或者触摸等事件方法，执行前需要判空;注册、调用。
第十一章 React 封装自定义组件
Etc.End的博客
12-11 1531
自定义组件是指根据应用需求，自定义的组件。它们可以是有状态的或无状态的，可以接受props并返回JSX或null，并且可以包含生命周期方法、refs、context等等。自定义组件在React应用中非常常见，因为React的核心思想就是组件化。每一个React页面都是由一个或多个组件构成，组件是构建React应用程序的基石。它们可以封装可重用的UI组件，使代码更加模块化和可维护。自定义组件可以有很多用途。例如，它们可以创建可重用的UI组件，如按钮、表单、布局等。
react18学习笔记
07-25
你可以使用React.createElement()函数或JSX语法来创建React元素和组件。React元素是不可变的，而React组件是可复用的。\[1\] 2. react-dom.development.js或react-dom/client模块：这些模块提供了处理真实DOM的功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值