文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何用120行代码，实现一个交互完整的拖拽上传组件？

How To Implement Drag and Drop for Files in React 文章讲了React拖拽上传的精简实现，但直接翻译照搬显然不是我的风格。...于是我又用React Hooks 重写了一版，除CSS的代码总数 120行。 效果如下： ? 1....React Hooks中 新增了useRef API 语法 const refContainer = useRef(initialValue); useRef 返回一个可变的 ref 对象，。...阻止默认行为 代码很简单： e.preventDefault() //阻止事件的默认行为(如在浏览器打开文件) e.stopPropagation() // 阻止事件冒泡 每个事件阶段都需要阻止，为啥呢...事件在生命周期里的触发与销毁 原本EventListener的事件需要在componentDidMount添加，在componentWillUnmount中销毁： componentDidMount (

1.8K30

实战为王，从零封装 Icon 组件

在学习了 props 属性之后，结合一个实践案例，我们就能够扎实的掌握它。 在实践应用中，图标的使用无处不在。小到编辑器的功能按钮，大到 chrome 浏览器的任务栏，都有大量的图标需要处理。...到了现在，字体图标早已经不是什么黑科技了，它几乎被普及到了所有网站。 在 CSS3 中，有一个语法可以自定义字体 @font-face。如果字体库是由图标组成，那么我们就可以创建字体图标了。...假设我们期望在 HTML 中放入一个代表图标的标签 那么，只要它对应的 CSS 这样写，就可以在页面上显示出字体库中的图标了 .icon-warn {...--通过对spin的修改，来控制图标是否旋转--> 其余的我们可能在实践中还会添加新的需求，到时候再根据需求做改进即可。...然后在 components 目录下创建 Icon 目录。并分别创建 index.tsx 与 index.scss。我们将字体图标下载下来，存放于Icon目录的fonts目录中。

1.2K20
您找到你想要的搜索结果了吗？
是的
没有找到

Taro 小程序开发大型实战（二）：多页面跳转和 Taro UI 组件库

在上一篇教程[1]中，我们用熟悉的 React 和 Hooks 搞定了“奥特曼俱乐部”的雏形。...这一篇完成后的 DEMO 如下： 具体有三个页面： 主页：展示了所有帖子，以及添加新帖子的按钮。 帖子详情：展示单个帖子的全部内容。 个人主页：展示当前用户的个人信息。...为了方便管理，我们需要引入一个新的 prop（isList），用于判断此组件是显示在首页列表中，还是在帖子详情页面中。...具体而言，在 Taro 中实现页面跳转只需两个步骤： 在入口文件（src/app.jsx）中在 App 组件的 config 中配置之前提到的 pages 属性 在任意组件中通过 Taro.navigateTo...在 PostCard 中添加跳转逻辑 我们首先在 PostCard 组件中添加跳转逻辑，使得它被点击后将进入该帖子的详情页面。

2.7K20

用 React 构建可复用的设计系统

React 让书写漂亮，并富有表达力的代码更加容易。然而，如果组件不能很好的复用，随着时间的推移代码变得更加零散和更加难以维护。 我曾经看到的代码库中，同样的 UI 有十几种不同的实现！...遵守这一规则会简化我们样式的很多问题。 让我们在代码中先设置一个基本的网格系统。我们从设置布局的 app 组件开始。...最后，我们将在 SCSS 中定义样式。...storiesOf 定义了一个新的 story，一般就是你的组件。然后，通过 add 添加新的章节，为了展示组件不同的状态。 ?...当然，这是非常基本的，但是 storybooks 有一些插件可以帮助你添加文档。我还注意到她们也支持 emoji？

3.2K30

用 React 构建可复用的设计系统

React 让书写漂亮，并富有表达力的代码更加容易。然而，如果组件不能很好的复用，随着时间的推移代码变得更加零散和更加难以维护。 我曾经看到的代码库中，同样的 UI 有十几种不同的实现！...遵守这一规则会简化我们样式的很多问题。 让我们在代码中先设置一个基本的网格系统。我们从设置布局的 app 组件开始。...}; 最后，我们将在 SCSS 中定义样式。...storiesOf 定义了一个新的 story，一般就是你的组件。然后，通过 add 添加新的章节，为了展示组件不同的状态。 ?...当然，这是非常基本的，但是 storybooks 有一些插件可以帮助你添加文档。我还注意到她们也支持 emoji？

1.4K20

基于 TS 的 React 模板项目，集成 eslint sass，采用 StandardJS 代码风格，包含自动注册组件等各项功能，新建项目或 React 学习必备

我很不喜欢在 js 中写 css。所以，我在项目中构建了 style 文件夹，所有的 scss 文件均放在此处。然后在项目入口中加以引用，即可。...style scss 说明 在项目 @/style/ 目录中，我们可以新建多个文件夹、多个层级的文件夹，在里面编写 scss 文件。...该命令会启动一个进程，当发现有新的 scss 文件时，就会自动添加进去。一般在项目稳定时，是不需要启动这个进程的。...当然，这只是个含义，现代框架库不管这些…… 但有些传统我们是要坚持的（一位逐渐秃顶的前端如是说……） 同自动组件一样，在我这样的规划中，js 和 scss 文件分离了，找起来可能不太好找。...因此，需要大家用一定的规则去组织文件夹以及文件，这样才能不乱。 我这样搞得好处是，无需其他配置，即可在 scss 文件中使用混入、引用等各种高级特性了。

1.8K20

css模块化及CSS Modules使用详解

那么css模块化思想，也就是在css编写环境中，用上模块化的思想，把一个大的项目，分解成独立的组件，不同的组件负责不同的功能，最后把模块组装，就成了我们要完成的项目了。 css模块化有什么好处？...无法共享变量 复杂组件要使用 JS 和 CSS 来共同处理样式，就会造成有些变量在 JS 和 CSS 中冗余，Sass/PostCSS/CSS 等都不提供跨 JS 和 CSS 共享变量这种能力。... 由于在 .normal 中 composes 了 .base，编译后会 normal 会变成两个 class。 composes 还可以组合外部文件中的样式。...幸运的是，CSS Modules 这点做的很好： 如果我对一个元素使用多个 class 呢？ 没问题，样式照样生效。 如何我在一个 style 文件中使用同名 class 呢？...├── Component.js └── Component.scss 这样所有全局的样式都放到 src/styles/app.scss 中引入就可以了。

6.6K100

vue3 实战总结

，也是 react-hook 开源作者的疑问 官方的表述 ui 和逻辑的一致性 白话版翻译 js 本身提供更灵活的使用方式在 jsx 中不仅仅可以 v-show，还可以添加更多的 style,color...，数据变化时 render 函数重复触发对浏览器的性能就是极大的消耗，官方也提供了例如 useMemo,useCallback 这样的hook实现手动缓存 技术选型为jsx原因 在语法检查，函数式编程，...不管是 hook 还是 setup 只要使用了新的写法确实在大型项目中能减少很多代码,实现了方法公用，减少了生命周期中的操作 react比较代码量和方法使用简易程度 // 新写法在代码量和逻辑切割上面更有优势...&message({}) watchEffect watchEffect 是没有中间状态的，可以监听所有属性变化,立即执行，vue2中复杂的写法在现在的api中可以更少的代码量实现 // vue2.../index.module.scss' export default defineComponent({ render() { //使用函数变量控制样式，在setup中也可与数据关联判断

2K30

vue3 实战总结

，也是 react-hook 开源作者的疑问 官方的表述 ui 和逻辑的一致性 白话版翻译 js 本身提供更灵活的使用方式在 jsx 中不仅仅可以 v-show，还可以添加更多的 style,color...，数据变化时 render 函数重复触发对浏览器的性能就是极大的消耗，官方也提供了例如 useMemo,useCallback 这样的hook实现手动缓存 技术选型为jsx原因 在语法检查，函数式编程，...不管是 hook 还是 setup 只要使用了新的写法确实在大型项目中能减少很多代码,实现了方法公用，减少了生命周期中的操作 react比较代码量和方法使用简易程度 // 新写法在代码量和逻辑切割上面更有优势...&message({}) watchEffect watchEffect 是没有中间状态的，可以监听所有属性变化,立即执行，vue2中复杂的写法在现在的api中可以更少的代码量实现 // vue2.../index.module.scss' export default defineComponent({ render() { //使用函数变量控制样式，在setup中也可与数据关联判断

25320

基于 React 实现一个 Transition 过渡动画组件

因此需要给 Transition 组件添加一个 toggleClass 属性，标识要切换的 class 样式，再添加一个 action 属性实现样式切换，action 为 true 时添加 toggleClass...另外，在 React 中，props.children 包含组件所有的子节点，即组件的开始标签和结束标签之间的内容（与 Vue 中 slot 插槽相似）。...例如： 默认按钮 在 Button 组件中获取 props.children，就可以得到字符串“默认按钮”。.../Transition.jsx' export { Transition } export default Transition 然后，在 Transition.jsx 文件中为组件添加 props...不同的浏览器要求使用不同的前缀，因为火狐和IE都已经支持了这两个事件，因此，只需针对 webkit 内核浏览器进行兼容的 webkitTransitionEnd 事件检测。

5.9K20

Sass和SCSS之间的不同之处是什么?

Sass和SCSS之间的不同之处 这是2014年4月28日发布的文章的更新版本 我已经在(http://www.sitepoint.com/author/hgiraudel/) 里写了很多关于Sass，...但是，Sass看起来就像这样，直到3.0的版本在2010年5月问世，为Sassy CSS引入了一种名为SCSS的全新语法。...因为一个错误的缩减可能会破坏整个“.sass”样式表,所以它确保编码始终保持干净且格式良好。有一种编写Sass代码的方法：好方法。 但要小心！在Sass中缩进means something。...SCSS语法的优点 （对于启动器，它是完全兼容CSS。它意味着，你可以重命名一个“.scss”中的CSS文件并且它将just work。...我喜欢它是因为短而且容易。在最后一刻我改变主意之前我实际上正将整个代码库移到Sass。我感谢我过去的自我，以阻止这一举动，因为我们一旦使用缩进语法，它将很难与我们的几个工具一起使用。

91820

React 折腾记 - (10) UmiJS 2.x + antd 重写后台管理系统记录的问题及解决姿势

(nuxtjs既视感) dva(基于redux+redux-saga的封装方案):写起来有vuex的感觉; 主要记录我在过程中遇到的问题及解决的姿势,技术栈 antd 3.11.x + umi 2.x...在封装一些组件的过程,我用了React.Fragment(: 简写)来保证组件同级并列 有些必须需要props.children带上一些属性或者样式来保证我想要的效果....)的方法,与常规数组用法类似,只是参数不一样 React.cloneElement: 如名字所示,克隆子元素 这是上篇文章用到的部分内容,需要改造传递进来的按钮,给添加样式 // 构建 // 克隆子组件并且添加自己要添加的特性...所以全局性放在全局更为合适,当然你不需要动态引入的话,页面间跨调是允许的..我目前是这么做; ---- pages目录下的文件或者目录不自动生成对应可访问的page 默认在page目录下,除了部分特殊的文件...就是缩小的时候隐藏部分子菜单,这个问题在我做侧边栏变水平的时候遇到.我缩小到ipad的尺寸 会溢出,用了常规的法子,就正常了,就是style那里设置一个最大宽度或者宽度 至于风格变化是因为antd内置了两套风格

3.2K20

这样入门 js 抽象语法树(AST)，从此我来到了一个新世界

Rollup 是一个不错的选择，但是我（自虐般地）选择了 Typescript 自带的编译器 tsc ，然后我就开始我的填坑之旅～ tsc 遇到的坑 在使用 tsc 编译我的代码时，对我目前来说，...简化引用路径问题 首先我是在 tsconfig.json 中写了简化引用路径配置的，比如针对以上目录，我是这样： { "compilerOptions": { "baseUrl":...，我要是想引用 util 或 assets 里面的文件模块、资源就会特别方便，比如我在 index.tsx 文件中这样引入：编译前： import classNames from "@Utils/...引入样式文件后缀名问题 我们做一个项目时在所难免会用到 sass 或 less ，本项目就选择了 sass ，我在 index.tsx 中引入样式文件方式如下： import "....就在一筹莫展之时，我突然想到，卧槽，这不就是类似于上面提到的 tscpaths 这个工具吗，也是在文件内做字符串替换，太像了！

1.7K21

vue弹窗屏蔽滑动的两种解决方案

2019-5-28 任世界改变，我未时过境迁 序   在开发过程中，我们经常会遇到要加弹窗的需求，而如果当前页的展示数据一屏展示不完，则在打开弹窗后，有滑动操作时，页面也会随之滑动。...，保存到data中；②给body添加步骤1的css；③设置body的高度为刚才获取到的高度。...移除方法： ①将刚才冬天给body添加的css移除；②当前滑动高度设置为data中存储的高度。 b. 效果 ? c....备注 .modalOpen的css样式，放在公共样式中，因为我们要改变的是body的样式，因此在组件中写的样式可能会失效。...例如，我将样式放在了 src/assets/css/common.css /*弹层*/ body.modalOpen { -webkit-overflow-scrolling:touch;

1.8K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券