赵乘风_i

在网上找了很久，也都是利用window.scrollTo 方法去解决的，但我尝试后，发现没有生效。问了其他大佬之后，才发现问题出在 scrollTo 方法的调用上class ScrollToTop extends Component { componentWillReceiveProps(nextProps) { // 当路由切换时 if (this.props.location !== nextProps.location) {

现在的项目是基于antd了，但又要和之前的UI保持一致，设计师希望还用之前的tabs 标签页的样式，所以就需要在antd Tabs的基础上进行一些样式的修改。如下：在 antd Tabs type='card'的基础上进行样式修改<div className='c-tab-capsule'> <Tab type='card'> {children} </Tab></div>.c-tab-capsule { .ant-tabs-

需求背景在最近的项目中，遇到一个比较复杂的场景，点击触发后会打开modal弹框，但是因为情况比较多，总共有3种方式都可以打开modal框，所以在父组件的处理就比较复杂，涉及到了多次渲染，就导致modal框在打开的时候，会闪一下。我也知道，处理好多次渲染的问题，modal框应该在打开的时候就不会闪了，但是，因为需求场景比较复杂，如果要处理多次渲染，那就会导致modal框打开后的各种问题，所以不能修改解决在仔细看了官网的api后，发现一个属性， maskTransitionName 其实就是将Modal

最近需要做一个word和pdf预览的功能，因为基础的技术栈是 react，于是就选用了 react-file-viewer 这个插件.其实这个插件，还支持更多文件格式Images: png, jpeg, gif, bmp, including 360-degree imagespdfcsvxslxdocxVideo: mp4, webmAudio: mp3安装npm i react-file-viewerps: 如果React版本小于16，需要安装 0.5版本的 react-fil

目标让用户短时间内获取重要信息 => 量化，合适的图表，布局与颜色搭配分析过程从上面两张图可以知道，在整个的分析过程中，前端负责的是 图表的设计。选用哪个图表，以及数据关系如何，这些东西是产品来决定的，由于开发时间以及对数据图表概念不清晰等问题，我们很少关注是不是应该这样去实现。这样看来，我们是需要学习一些这样的知识了，会用，也要知道为什么要用。图表选择可视化目的 数据集特征...

我又来更新了~简单聊一下我前段时间社招的经历啦~到新公司入职已经两个多月了，从准备面试到确定offer再到入职，就1个半月时间，似乎很快，但这也让我感触颇深。首先是为什么要离开之前的公司呢？面试的时候，每一家hr都会问，谈话的时候，领导也会问。我一直的回答都是两个点，首先是我毕业两年多了，想要寻求一个更大的发展空间，还有一个点就是工资太低了。但一般没有说第二个点，只有再追问时，我会直接说了，因为也没有必要隐瞒，跳槽嘛，大家都心知肚明，大部分原因都是钱没给到位。其实我离开还有一个点就是之前一起毕业进公

有一个需要实现的需求： 可展开表格 可以全部展开或关闭。如下：技术实现前提： React + antd Table + Hooks + tsx在 antd Table 上并没有找到这个属性，所以就自己上手来解决一下咯。实现思路：写一个同级的 div ,设置其css属性，让它绝对定位到 父表格对应的th上设置其打开或关闭的显隐使Table的所有 keys 可控完善细节总体...

期望在新代码中使用hooks函数 + hooks = 有‘生命周期’的组件与class的区别：Hook 提供了强大而富有表现力的方式来在组件间复用功能，自定义hookconst [originData, setStateData] = useState(0);const newData = originData * 2;setStateData(newData);//useEf...

1、全局安装tsnpm i -g typescript2、创建tsconfig.jsontsc --init修改tsconfig.json，开启jsx和allowJs配置，3、安装开发环境依赖npm install --save-dev typescript @types/react @types/react-dom ts-loader4、修改webpack.config.js....

基本的配置大概已经结束了，现在我们可以使用antd的组件来进行业务开发了。改动的地方是这些新建一个全局菜单文件 layout/index.jsimport React from 'react';import { Layout, Menu, Icon, Breadcrumb } from 'antd';import { withRouter } from 'react-router-do...

使用webpack主要是想因为其优秀的压缩打包功能，之前的配置中只是设置了关于dev环境的启动和运行。但是打包的时候文件并没有变小，也就是没有使用到压缩的配置。这次会配置相关的压缩以及区分生产环境和开发环境开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot...

上一篇是关于引入react,redux,antd的，项目已经可以正常运行了，但是拿到的都是定义的死数据。这篇文章讲一下配置代理，调mock数据。简便起见，我使用的是Easy Mock，定义好mock数据，在项目中引入使用。先说一下Easy Mock的使用方法，创建一个项目，创建好之后，进入刚才创建的这个项目创建接口并在左侧添加数据创建好之后，就是要在项目...

在网上看到过很多教程，都是从零开始构建一个项目，每次看着都浩浩荡荡的开始跟着博客一步一步走，但是总是很难成功。自己一直想要从零构建一个项目来实践一下，了解一下偏底层的配置。最近比较有时间，就又一次开始了。不过这次没有盲目的在网上找教程，而是直接打开官方文档webpack，开始实践。 所以给大家的建议也是 学习就直接看官方文档就行，遇到问题再搜索，整那些有的没的，其实...

最近在项目中的一个需求是， 小图点击可以弹框放大，然后能查看原图，顺时针一直旋转，每次90度。实现方法：使用react开发，所以直接选用antd 的组件， Upload 。结合CSS3的旋转属性；查看原图可以直接使用window.open()打开新的标签页。实习代码： constructor(props){ super(props); ...

React组件在生命周期里面大概有两种情况，一种是初次渲染，一种是状态更新导致再次渲染。咱们从组件生命周期的每一步可进行的操作的角度来了解一下。初次渲染构造函数，指定This，初始状态，绑定函数（constructor） constructor(props){ //指定This super(props) ...

写在前面：根据网上教程学习整理，感谢各位大佬们是什么？为什么要用？怎么用？数据流Redux 的适用场景：多交互、多数据源。用户的使用方式复杂不同身份的用户有不同的使用方式（比如普通用户和管理员）多个用户之间可以协作与服务器大量交互，或者使用了WebSocketView要从多个来源获取数据从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。某个组件的状态，需要共享某个状态需要在任何地方都...

写在前面：根据网上学习教程整理归纳，感谢大佬们如果我们需要使用 JSX，则 &lt;script&gt; 标签的 type 属性需要设置为 text/babel在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代注释需要写在花括号中1、在标签内部的注释需要花括号2、在标签外的的注释不能使用花括号JSX 允许在模板中插入数组，数组会自动展开所有...

毕业刚到公司，老大让我做一个系统，开发周期20天。遇到了很多问题，首先总结一下在开发之外需要注意的问题，关于开发的问题会在另一篇博客中。1.拿到原型图，首先需要进行分析，将页面布局和逻辑都搞清楚，不要急着开发，有什么问题及时向产品提出。2.和后台定义接口数据，包括格式，避免在联调时出现问题。3.在开发的时候可以看一看有什么模块可以进行复用，写成组件4.如果修改到公共文件，及...

link路由跳转的遇到的问题：          1: 使用query,data等进行传值，可以在另一个页面拿到值，但是to的跳转不起作用                       解决： 1.去掉link,加点击函数，使用this.props.history.push('./xxxxx')，参数有 to,query,data等。                           ...

做的项目中有一个功能是需要对多个Input组成的list可以新增和删除。刚开始想的解决是直接使用index来做，这个可以新增，但是做不了删除，会出现list错乱的问题，即使是删除中间的某一个，但总也是删除的最后一个。原因是index-1只会删除最后一个，再重新渲染后会刷新列表。如果只是新增但是不填写内容，那么删除了也无所谓，但如果新增后填写再删除就出问题了。解决办法是使用唯一标识符，也...

问题：componentWillReceiveProps，在父子组件传值中，如果子组件不能在constructor中通过props拿到值，就使用这个挂载函数。如果需要在子组件中改变父组件传来的值，就直接修改，但是修改后如果更新了props的值，componentWillReceiveProps函数就会再调用一次啊，导致你要修改的值重新初始化，就达不到修改的效果。解决：在父组件中修改这个...

问题：创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了原因：点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。解决办法：不使用initialValue设置动态更新的值，而是使用 this....

antd from验证input框只能输入数字问题：Input框中如果只能需要输入Id，也就是数字型字符串，需要进行验证。解决办法对其进行实时正则验证， /^[1-9]\d*$/代码实现：&amp;amp;lt;Form.Item label='ID' &amp;amp;gt; { getFieldDecorator('id', { rul...

问题：1、confirm 使用在使用antd的confirm确认时，需要在点击事件发生后关闭弹框。但是confirm提供的关闭只有 确定 按钮。那么就需要自定义关闭弹窗。点击  密码修改页  之后 会打开新的tab页，所以需要弹框在点击之后也关闭。解决：confirm提供了一个弹窗的销毁方法const info = Modal.info({})info.destroy(...

选择某个子菜单时，需要将父菜单也发送过去，后端要判断权限，如果只发子菜单，就做不到匹配，导致父菜单都不会显示在菜单栏。需要解决的问题是antd tree中，父子节点是受控的，默认如果只选择一个子节点，就只把这一个子节点放进数组，如果选择了父节点下的所有子节点，就会将父节点也放进去。现在需要的是，只选择一个子节点的时候，也将父节点放进去。但是antd tree组件没有提供这个属性。于是自己按照后...

问题：使用react modal的时候，弹框显示不同的值，因为显示的值是传到子组件中的，需要实现的是，点击不同的编辑，弹框中拿到的是对应的值。使用的是在FormItem中设置initialValue，但是只有第一次能拿到值，之后就都拿不到。原因：modal 组件在关闭之后，并没有销毁组件，导致FormItem中设置initialValue时，只有在初始化加载的时候赋值，之后点击...

问题：react antd Tab页切换，第一次都加载数据，之后切换都不加载。根据请求接口返回的值是否有内容来判断是否发送请求。lodash.isEmpty(arr) &amp;&amp;  this.getData()但是路由跳转后，应该组件是销毁了，但在使用mobx的数据，有值之后就把值存在相应的对象中，导致再进去另一个item对应的详情页的时候，数据没有改变，相应的对象保持着...

写在前面：参考网上学习教程，进行知识点归纳React 是一个用于构建用户界面的JAVASCRIPT库 ，不是MVC/MVVM结构React 特点 1.声明式设计 −React采用声明范式，可以轻松描述应用。 直接声明所有dom元素和属性2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活 −React可以与已知的库或框架很好地配合。4.JSX − JSX 是 Jav...