React
文章平均质量分 66
quitv
这个作者很懒,什么都没留下…
展开
-
React管理后台退出功能
使用Dropdown 组件进行页面调整首先我们在Frame里的index.js 里面引入Dropdownimport { Layout, Menu, Breadcrumb, Icon ,Dropdown} from 'antd';引入好之后放入<Header> 里面 ,然后做一个样式Dropdown有一个 overlay是一个类似于menu,然后我们定义一个Menu<Dropdown overlay={popMenu} > <原创 2021-08-07 20:53:04 · 676 阅读 · 0 评论 -
React管理后台登录判断
在登录页面里,当用户点击登录的时候我们肯定要调用服务器端的接口 ,判断用户是否登录成功,如果登录成功会把对应的(Token值)存在本地,接着我们会根据 (Token)值来判断用户是否登录接着我们创建一个文件utils这里面会封装一些我们常用的方法,比如 auth.js他的作用是存取用户的一些授权信息的export function getToken(){ //会在localStorage里面存放Token ,服务器会给我们一个类似令牌,也会保存下来 return localStora原创 2021-08-07 20:10:38 · 1320 阅读 · 0 评论 -
React 项目 列表页面的搭建
首先我们进入 商品列表页面List.js 里面这里我们使用了 antd 最终的列表页面效果如下,根据这个展示情况进行组件的添加先绑定表格的数据 和列columns 是一个数组,每一个列都有一个标题columns = [{title:‘序号’,key:‘id’,width:80,align:‘center’},{title:‘名字’,dataIndex:‘name’//表示名字对应的一个数据里面的,某一个属性名对应的}]table 的显示边框属性 bordered接着有一个d原创 2021-08-07 12:22:15 · 882 阅读 · 0 评论 -
React项目 管理后台页面框架搭建
使用 antd 这个框架搭建使用 Layout 进行页面布局在文件夹 component 创建一个新的组件 叫做Frame ,然后里面在创建一个叫做index.js ,这是我们管理后台的一个大的布局结构在index.js 里添加代码 ,首先在antd 找到合适的布局,然后把代码粘贴过啦,这里我使用的是把Layout 里面的内容引入import { Layout, Menu, Breadcrumb, Icon } from 'antd';const { SubMenu } = Menu;原创 2021-08-07 10:53:40 · 1491 阅读 · 0 评论 -
React 项目实战 路由和页面组件创建
1.项目创建和组件安装创建项目 npx create-react-app myapp#antdnpm i antd指定安装固定antd版本: npm i antd@2.10.4 —save (在 node_modules同级目录下)#路由npm i react-router-dom搭建目录结构首先建立两个文件 一个pages 保存页面信息 一个components 存放组件信息在pages 里面创建一个登录页面 Login.js ,在创建一个所有管理后台的页面叫做admin 。原创 2021-08-06 16:56:31 · 528 阅读 · 0 评论 -
React 查找表格数据例子
假设我们已经有了一个返回 JSON 的 API[ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, {category: "Sporting Goods", price: "$29.99", stocked: false, nam原创 2021-07-29 15:09:17 · 701 阅读 · 2 评论 -
React 状态提升 温度转换项目
使用 create-react-app 快速构建 React 开发环境create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6温度和类型是数据源npm install -g create-react-appcreate-react-app reactcd react npm startimport React, { Component原创 2021-07-29 11:47:44 · 174 阅读 · 0 评论 -
React 元素渲染
元素是构成 React 应用的最小砖块元素描述了你在屏幕上想看到的内容。const element = <h1>Hello, world</h1>;与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象,React DOM 会负责更新 DOM 来与 React 元素保持一致。你可能会将元素与另一个被熟知的概念——“组件”混淆起来。我们会在下一个章节介绍组件。组件是由元素构成的。将一个元素渲染为 DOM假设你的 HTML 文件某处有一个 <div&g原创 2021-07-19 10:42:56 · 55 阅读 · 0 评论 -
React 哲学
我们认为,React 是**用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。**它在这里插入代码片在 Facebook 和 Instagram 上表现优秀。从设计稿开始假设我们已经有了一个返回 JSON 的 API,以及设计师提供的组件设计稿。如下所示:该 JSON API 会返回以下数据:[ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {catego原创 2021-07-17 16:46:00 · 95 阅读 · 0 评论 -
React 组合 vs 继承
React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。包含关系我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中:function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> );}这使得原创 2021-07-16 17:47:17 · 285 阅读 · 0 评论 -
React 状态提升
状态提升通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去。让我们看看它是如何运作的。创建一个用于计算水在给定温度下是否会沸腾的温度计算器。我们将从一个名为 BoilingVerdict 的组件开始,它接受 celsius 温度作为一个 prop,并据此打印出该温度是否足以将水煮沸的结果。function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>The原创 2021-07-16 17:02:40 · 427 阅读 · 1 评论 -
React 表单
表单在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称受控组件在 HTML 中,表单元素(如、 和 )通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新.我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的原创 2021-07-16 15:25:42 · 211 阅读 · 0 评论 -
React 列表 & Key
如下代码,我们使用 map() 函数让数组中的每一项变双倍,然后我们得到了一个新的列表 doubled 并打印出来:const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);代码打印出 [2, 4, 6, 8, 10]。渲染多个组件可以在这里插入代码片通过使用 {} 在 JSX 内构建一个元素集合下面,我们使用 Javascript 中原创 2021-07-16 14:26:38 · 326 阅读 · 0 评论 -
React 事件处理 ,条件渲染
事件处理React 事件的命名采用小驼峰式(camelCase),而不是纯小写1.1使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串例如,传统的 HTML:<button onclick="activateLasers()"> Activate Lasers</button>在 React 中略微不同<button onClick={activateLasers}> Activate Lasers</button&g原创 2021-07-15 17:08:14 · 386 阅读 · 0 评论 -
React state&生命周期
1.更新UI界面的方法,通过调用ReactDOM.render(),来修改我们想要渲染的元素。function tick(){ const element = ( <div> <h1> Hello,world</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div>);ReactDOM.render(element;docment.getElement原创 2021-07-15 16:24:18 · 137 阅读 · 0 评论