有一个需求是这样的. 一个组件里若干个区块.区块数量不定. 区块里面是一个正六边形组件,而这个用 SVG 和 canvas 都可以.我选择 canvas. 所以就变成了在 react 中使用 canvas 的问题. canvas 和 SVG 有一个很大的不同. SVG 是标签,所以HTML怎么整,SVG 就怎么整. 而 canvas 是一套相对独立的 web API,以 canvas 标签为容器(HTML接口). 所以在 react 中处理 canvas 类似于在 react 中处理第三方DOM…

有一个需求是这样的. 一个组件里若干个区块.区块数量不定. 区块里面是一个波浪效果组件,而这个一般用 SVG 做. 所以就变成了在 react 中使用 SVG 的问题. 首先是波浪效果需要的样式. .p{ font-size: 12px; line-height: 2; text-align: center; margin:0; width: 52px; color: #fff; } .irrigate_svg { height: 52px; width: 52px; } .masked { -…

https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553703186653.mp4 02 以组件方式考虑UI的构建 https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmu…

此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 API 的介绍与代码实战,以及 React Native 与 iOS.Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习. 书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而…

RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfrms/react-native-docs/blob/master/docs/getting-started.md React Native Navigation React Native Navigation provides 100% native platform navigation on both…

//show: //code: import React from "react" import {findDOMNode} from 'react-dom' import { Button, Row, Col} from 'antd' class CanvasTest1 extends React.Component { componentDidMount() { const divDom = findDOMNode(this) const ctxCanvas1 = divDom.q…

React实战之将数据库返回的时间转换为几分钟前.几小时前.几天前的形式. 不知道大家的时间格式是什么样子的,我先展示下我这里数据库返回的时间格式 ‘2019-05-05T15:52:19Z’ 是这个样子的,然后上代码: 在utils文件下创建文件time.js文件 time.js export default function time(UTCtiem) { var T_pos = UTCtiem.indexOf('T'); var Z_pos = UTCtiem.indexOf('Z');…

React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看代码和注释,直接用就行 我直接放在form表单中,因为实战中单个附件上传很少几,乎都在form表单中加入一个附件上传所以为了更好的应用,我直接就放在form表单中应用 import React, { PureComponent } from 'react'; import {Form, Button…

React实战之60s倒计时按钮——短信验证按钮 导入:(antd组件——Form表单) import { Button, Form, Input } from 'antd'; const FormItem = Form.Item; state = { loading: false, yztime: , }; //倒计60s count = () => { let { yztime } = this.state; let siv = setInterval(() => { this.setSt…

总览篇:react 实战之云书签 本篇是实战系列的第一篇,主要是搭建 react 开发环境,在create-react-app的基础上加上如下功能: antd 组件库按需引入 ,支持主题定制 支持 less 语法,并使用 css-module 配置路由 支持 http 请求 配置 redux 注意:需要 node 版本大于 8.0. 创建 create-react-app 安装 npm install -g create-react-app 创建 react 应用 create-react-ap…