jsx

ElementUI Table 首行固定

由 若如初见. 提交于 2020-04-24 06:52:59
本文地址： https://www.cnblogs.com/veinyin/p/12101047.html 需求描述：首行固定，吸附在表头下，数据多时其他行可以纵向滚动 方案一 两个表格拼凑 第一个表格展示头部和固定行 第二个表格展示其它数据 示意图如下 优点：固定行数没有限制 缺点：适用场景，仅横向 纵向均无滚动条时可用 若有横向滚动条，两个表格的滚动条是分开的，会出现滚动A B不动，或滚动B A不动的情况，Windows下会展示两个横向滚动条，不美观 若有纵向滚动条，在Windows下滚动条是默认有宽度的，滚动条的宽占用了表格B的部分宽度，导致表头和表主体列错位，示意图如下 方案二 修改表格样式 将合并行上移 ElementUI 的 Table 有合并行这个功能，合并行位于 footer 中，固定在表格底部，即使 body 有横向或纵向滚动，样式和功能都已经优化好了。示意图如下 要做的就是把样式调整成我们想要的，使用定位把 footer 放到 header 下，body 向下移一行的距离即可。 补充：图中为官方定义合并行内容的方法，如果单元格内展示的内容或样式比较复杂，可以 return 元素，类似 JSX 写法 优点：如有滚动不用过多关注样式和功能问题 缺点：只能固定一行 总结： 方案一 两个表格都无数据时的效果、两个表格的拼接处边框样式要处理。 方案二 表格如果为流体高度

从 Babel 到组件按需引入原理

由 北战南征 提交于 2020-04-21 04:57:59
前言 谈到 babel 肯定大家都不会感觉陌生。 桌面端组件库 Element ，借助 babel-plugin-component ，我们可以只引入需要的组件，以达到减小项目体积的目的。 使用 babel-polyfill ，开发者可以立即使用 ES 规范中的最新特性。 有了插件： transform-vue-jsx 、 react ，我们在 vue 和 react 开发中可以直接使用 JSX 编写模板。 组件能按需引入到底是怎么实现的？ Babel 的工作原理是怎样的呢？ 带着疑问，我们尝试对其原理深入探索和理解。 Babel 编译的三个阶段 Babel 是一个 JavaScript 编译器。 和大多数其他语言的编译器相似， Babel 的编译过程可分为三个阶段： 解析 Parse ：将代码字符串解析成抽象语法树（ AST ）。简单来说就是对 JS 代码进行词法分析与语法分析。 转换 Transform ：对抽象语法树进行转换操作。这里操作主要是添加、更新及移除。 生成 Generate ： 根据变换后的抽象语法树再生成代码字符串。 解析 Parse Babel 会把源代码抽象出来，变成 AST 。 可以看看 var answer = 6 * 7; 抽象之后的结果。 { "type" : "Program" , // 根结点 "body" : [ { "type" :

React.createElement 和 ReactDOM.render 的简易实现

由 ￡可爱￡侵袭症＋ 提交于 2020-04-20 12:16:57
前言 React.createElement 是React中一种创建React组件的方式，它古老而神秘。 虽然日常开发中已经很少能够见到他的身影。但是将JSX用babel编译之后，就是 createElement 函数 ReactDOM.render 是React实例渲染到dom的入口方法 React.createElement 参数 createElement 支持传入n个参数。 type：表示你要渲染的元素类型。这里可以传入一个元素Tag名称，也可以传入一个组件（如div span ul li 等，也可以是是函数组件和类组件） config：创建React元素所需要的props。包含 style，className 等 children：要渲染元素的子元素，这里可以向后传入n个参数。参数类型皆为 React.createElement 返回的React元素对象。 React.createElement(type, config, children1, children2, children3...); 复制代码 createElement 方法 我们新建一个JS文件，导出一个 createElement 函数。 方法内置一个 props 变量。将我们的 config 对象本身所有的属性完全copy到 props 上 function createElement ( type,

🔥从0实现React 📖PART1 React的架构设计

由 只谈情不闲聊 提交于 2020-04-20 09:49:09
为什么要写这个系列？ 2020年初给自己定下目标，今年要读懂React源码，最好能成为React Contributor（没想到很快就实现了，虽然提交的commit很微小）。 为什么要读React源码呢，因为如果单纯开发日常业务的话，前端的边界其实很窄。回想一下，你今年做的业务，换作是去年的你，前年的你，换作是应届生甲乙丙，他们能替换你的位置么？我这么一想，就有迫切的愿望拓展自己的边界。 前端的边界很多——可视化、框架、工具链等，这些都能成为一个前端区别其他前端的地方，而我选择从日常工作最熟悉的伙伴——React下手。即使不考虑这些功利的因素，全世界最优秀的一批前端（Facebook）耗费多年开发的框架，去学习下他们的代码，不香么？ 既然定下了宏大的目标（笑😊），如何下手呢？网上有些类似《从0实现迷你React》的文章，他们提炼了React的一些关键思路，用很少的代码实现了React的某项功能，阅读他们对了解React的思路很有帮助，尤其推荐 这篇 。但这不是我想要的，我想要的是真正的React，辣个 React 。 于是，开始debug React 🐶。如果React是一个毛线团🧶的话，那么他的线头一定是 RectDOM.render(<App/>, document.getElementById( 'app' )); 复制代码 通过这个线头，我梳理出React首屏渲染会做的工作

antd pro 路由

由 倾然丶 夕夏残阳落幕 提交于 2020-04-18 19:39:33
概要 antd pro 路由简介 路由, 菜单和面包屑 页面之间的路由 带参数的路由 总结 概要 路由配置是单页应用的核心之一, antd pro 将所有的路由配置集中在一个文件中, 可以更好的对应用的全局进行管理. 同时, 它的路由还和菜单和面包屑自动关联上了, 真的是给开发节省了大量的时间. antd pro 路由简介 首先创建一个 antd pro 的项目, 创建方法很简单, 参见 antd pro 的文档 antd pro 的路由配置文件在项目根目录下的 config 文件夹中: /config/config.js 这里简单介绍路由相关的配置, 所以对默认生成的模板做一些改动, 去除登录和权限的部分. 并定义一些示例的菜单. 1 routes: [ 2 { 3 path: '/', 4 component: '../layouts/BasicLayout', 5 routes: [ 6 { 7 path: '/', 8 redirect: '/menu1/menu11/menu111', 9 }, 10 { 11 path: '/menu1', 12 name: 'menu1', 13 routes: [ 14 { 15 path: '/menu1/menu11', 16 name: 'menu11', 17 routes: [ 18 { 19 path: '/menu1

钻牛角尖似的学习React.萌到发蠢的萌新

由 社会主义新天地 提交于 2020-04-15 14:12:45
【推荐阅读】微服务还能火多久？>>> 嗯，，，实习期间一直用的vue,去年为了应付面试，（面试造火箭，工作拧螺丝。。。）但当时react看了一周，简历上都是写的，知道React.笑哭了要。。嗯。。。现在已经忘完了。 1.hello React 要安装三个依赖，具体原因对于只是知道1+1=2的我来说，太难了，不知道，现在，嗯，我的学习方法是温故而知新，等以后“温故”的时候再研究。hahh 1.安装三个必须要安装的 （1)react.js 这是核心包， 安装方式： npm install react --save (2)react-dom.js 渲染页面中的dom，当前文件依赖react核心文件 安装方式： npm install react-dom ---save (3)babel.js ES6转换成ES5 JSX语法换成js 现今浏览器兼容 安装方式： npm install babel-standalone --save 2.下载完成，添加引用 参照目录，引入对应的引用 3.创建根节点 <div id="demo"></div> 4.小栗子实现 <body> <!-- 创建根节点-有个页面徐亚偶一个根节点，这个几点下面的内容就会被react管理--> <div id="demo"></div> <script type="text/babel"> // jsx = js xml

React组件拆分与传值

由 血红的双手。 提交于 2020-04-13 08:11:24
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通过this.props的属性，接收传递过来的值 父组件 src/TodoList.js import React,{Component,Fragment} from 'react' ; import TodoItem from './TodoItem' ; import './style.css' ; class TodoList extends Component { constructor(props) { super(props); this .state = { inputVal: '' , list:[] }; this .changeVal= this .changeVal.bind( this ); this .addItem= this .addItem.bind( this ); this .deleteItem= this .deleteItem.bind( this ); } changeVal(e){ this .setState({ inputVal: e.target.value }); } addItem(e){ // 按下回车键 if (e.keyCode===13 && e.target.value!=="" ){ const list =[... this

使你成为更好的Vue.js开发人员的12个技巧和窍门

由 元气小坏坏 提交于 2020-04-11 18:59:39
我真的很喜欢使用Vue.js，每次使用框架时，我都会喜欢深入研究其功能和特性。通过这篇文章，我向你介绍了十个很酷的提示和技巧，你可能尚未意识到这些技巧和窍门，以帮助你成为更好的Vue开发人员。 更漂亮的插槽语法 随着Vue 2.6的推出，已经引入了插槽的简写方式，可用于事件（例如， @click 表示 v-on:click 事件）或冒号表示方式用于绑定（ :src ）。例如，如果你有一个表格组件，你可以使用这个功能如下： < template > ... < my-table > < template # row = { item }> /* 一些内容，你可以在这里自由使用“item” */ </ template > </ my-table > ... </ template > 复制代码 $on(‘hook:’) 可以帮助你简化代码 删除事件监听器是一种常见的最佳实践，因为它有助于避免内存泄露并防止事件冲突。 如果你想在 created 或 mounted 的钩子中定义自定义事件监听器或第三方插件，并且需要在 beforeDestroy 钩子中删除它以避免引起任何内存泄漏，那么这是一个很好的特性。下面是一个典型的设置： mounted () { window .addEventListener( 'resize' , this .resizeHandler); },

用Next.js快速上手React服务器渲染

由 ∥☆過路亽．° 提交于 2020-04-10 13:14:47
新前端时代的服务端渲染也提了很久了，各种技术演进层出不穷。 带你领略一下基于React和Nodejs架构的服务端渲染技术，让你快速上手，开发Next服务端渲染的项目。 本文参考官方文档，做精简总结，用一些小例子，让你快速理解Next.js项目的开发。 全文3800字左右，阅读全文约15分钟。 本文同步发表于知乎专栏：前端微志。欢迎关注。 什么是服务端渲染？ 服务端渲染，是指页面的渲染和生成由服务器来完成，并将渲染好的页面返回客户端。而客户端渲染是页面的生成和数据的渲染过程是在客户端（浏览器或APP）完成。 随着前后端分离模式的兴起，从服务端渲染到服务端渲染的演进，前端Web App给前端开发带来了很大的便利，并减轻后端服务器压力。 前后端解耦，让前端专注做好用户UI层，专注于提升用户体验，让后端专注于业务逻辑处理，分离成微服务，专心做好一件事。 前后端分离前的服务端渲染技术有：PHP，ASP，JSP等方式，分离后的前端SPA（单页面应用）渲染拥有独立的路由和页面渲染（React，Vue和Angular等），而SPA的最大问题是对SEO不友好，当项目对SEO有需求时，SPA就不是一个好的选择。 近两年来，React和Vue也开始支持服务端渲染（Server Side Render ），行业内也有这方面的实践，其中掘金就使用Vue的SSR功能做了全站服务端渲染，且效果良好。
订阅 jsx