首页 > 其他分享 >重拾react杂记

重拾react杂记

时间:2023-04-26 11:58:38浏览次数:30  
标签:function return 标签 react 杂记 组件 export 重拾 JSX

  1.  import { param,setParam} from 'React'
  2. 组件的名称必须以大写字母开头 <TableOfContents />
  3. 每个js文件只有一个 export default function xx(){}
  4. 你的标签和 return 关键字不在同一行,则必须把它包裹在一对括号中,

 注意:无论是子组件还是父组件,他们的名字都是大写字母开头,返回都是 JSX 标签(return(html标签))

 只能返回一个根元素如果想要在一个组件中包含多个元素,需要用一个父标签把它们包裹起来。(JSX 虽然看起来很像 HTML,但在底层其实被转化为了 JavaScript 对象,你不能在一个函数中返回多个对象,除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。)
JSX 要求标签必须正确闭合。像 <img> 这样的自闭合标签必须书写成 <img />

使用驼峰式命名法给 所有 大部分属性命名! class->className

export default function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3Am.jpg"
alt="Katherine Johnson"
/>
)
}

5 组件定义(在顶层定义每个组件,不能嵌套在父组件里面)

function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}

引用:

export default function Gallery() {
return (
<section>
<h1>了不起的科学家</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}

  1. 具名导出和默认导出

     



  2. 同一文件中,有且仅有一个默认导出,但可以有多个具名导出!

 

标签:function,return,标签,react,杂记,组件,export,重拾,JSX
From: https://www.cnblogs.com/fanjiawen/p/17354758.html

相关文章

  • React和Vue的区别
    React和Vue是两个非常流行的JavaScript框架,用于构建前端Web应用程序。以下是它们之间的一些区别:模板语法:Vue使用模板语法,它允许您在HTML模板中嵌入Vue代码,类似于AngularJS。React使用JSX语法,它允许您将JavaScript代码嵌入HTML模板中。数据绑定:Vue使用双向数据绑定,这意味着当......
  • react antd 函数式弹窗案例
     1.弹窗函数exportconstcheckReviewTaskTipModal=async(checkResult:{status:boolean;mseeage:string;})=>{returnnewPromise((r,j)=>{constcancelFc=()=>{mConfirm?.destroy();};constmConfirm=Modal.confi......
  • [REACT_DOC]-Quick Start
    目录QuickStart创建以及嵌套组件用JSX书写标记(markup)添加样式展示数据条件渲染列表渲染事件响应更新屏幕使用Hooks在组件之间共享数据QuickStart概览:如何创建以及嵌套组件如何添加markup和样式如何展示数据如何条件渲染,如何渲染列表如何响应事件并更新渲染如何......
  • 使用Ref还是Reactive?
    我喜欢Vue3的CompositionAPI,它提供了两种方法来为Vue组件添加响应式状态:ref和reactive。当你使用ref时到处使用.value是很麻烦的,但当你用reactive创建的响应式对象进行重构时,也很容易丢失响应性。在这篇文章中,我将阐释你如何来选择reactive以及ref。一句话总结:默认情况下使用......
  • React Native 桥接原生模块
    原生模块简介有时候一个RN应用需要访问一个原生平台的API比如相机,但是,默认情况下JavaScript是无法访问原生API的。原生模块系统暴露了一些Java类的实例对象给JavaScript,这样就可以允许开发者在JS代码中执行一些特定的原生代码。简单来说,桥接原生就是为了实现reac......
  • React、Ant Design 5.0 构建通用后台管理系统 - 接口服务环境搭建
    目录项目初始化项目结构package.jsontsconfig.jsonnodemon.jsonindex.tssrc/server.ts运行项目初始化mkdirgeneral-admin-system-servercdgeneral-admin-system-servernpminit-ynpminstalltypescriptts-node@types/nodenodemon@swc/core@swc/helpersregenerator-......
  • React、Ant Design 5.0 构建通用后台管理系统 - 登录页面
    目录安装依赖main.tsxsrc/styles/global.cssApp.tsxsrc/pages/user/Login/index.tsxsrc/pages/user/Login/style.module.css安装依赖npminstallantd@ant-design/icons@ant-design/pro-componentsAntDesign组件库@ant-design/pro-components封装一些好用的常用组件库mai......
  • SpringBoot+React 前后端分离
    SpringBoot+React前后端分离写个转发数据的小工具,本来只想开个SpringBoot服务带个页面,但感觉有点难受,正好之前研究了React,尝试一下前后端分离。后端简单用SpringBoot起个服务,写个接口处理请求:@RestController@RequestMapping("/data")publicclassDataController{......
  • react
    React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。1.......
  • react18中antd的Upload组件上传头像,并且拿到服务器返回的头像的url地址在页面中显示头
    业务需求:上传头像,上传完毕后拿到头像的url,把头像展示在页面中,最终把头像url和其他用户信息一起发送给服务器 上传头像流程 导入Upload组件和图标(一个加号,一个加载中)import{Upload}from'antd';import{PlusOutlined,LoadingOutlined}from'@ant-design/ic......