马优晨

CSSStyleDeclaration异常

如上图所示，不使用UI库，手写一个筛选器JS代码'use strict';import { createElement, useEffect, useState, Fragment, useCallback, useMemo, useRef,} from 'rax';import View from 'rax-view';import Text from 'rax-text';import Picture from '@ali/rax-pictu...

有时候我们会想要在组件之间重用一些状态逻辑。目前为止，有两种主流方案来解决这个问题：高阶组件和render props。但是这里我们讲一种自定义hook的方式： 首先，我们把公用逻辑抽取到一个叫做useFriendStatus的自定义 Hook 里： useFriendStatus组件import React, { useState, useEffect } from 'react';function useFriendStatus(friendID) {...

一、使用原生的方式引入 完整代码： like_button.js'use strict';const e = React.createElement;class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.like...

如上图所示，假设这是一个传统的秒杀购买场景：（1）问题概述：状态： （1,2）进入秒杀 （3）立即预约 （4）宝贝秒光 （5）活动结束 文字： 进入 秒杀文字颜色#fff，其他文字颜色都是 #ff3B56； 宝贝秒光，活动结束，文字带透明度30%；描边： 只有立即预约有描边，其他状态都没有按钮透明度：立即预约 8% 进入秒杀 100% 宝贝秒光 8% 活动结束 8%（2）解决方案： 拿到这个问题，首先很多人想想到的是...

常见的列表元素hover，我们使用的方式是，在获得原始数组对象的时候加一个标识符，然后mouseIn 的时候改变状态，mouseOut的时候恢复状态；一、举例演示const arr = [ {name:'123',age:13,sex:'man'}, {name:'125',age:13,sex:'man'}, {name:'124',age:13,sex:'man'} ](1)添加标识const arr = [ {name:'123',age:13,sex:'man',sho

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。（1）元素变量你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分，而输出的其他部分不会更改。if (isLoggedIn) { button = <LogoutButton onC

（1）useState的使用设置count的值和name的值；上边的情况会发生，name的值设置不进去，这注意：如果是对象或者数组等类型，必须要返回一个新的数组或者是对象才是可以的；初始值是对象初始值是数组（2）useEffect的使用useEffect的第二个参数第二个参数不写，只要dom变化都会进行监听，都会触发。如果是【】，只会触发一次。也可以专门去监听某一个值，比如上面的count, count的值变化，effect 就会执行；如果要想要清除副作用，则可以在effec

React Hook 官网地址：https://react.docschina.org/docs/hooks-faq.html（1）问题分析？Hook 是什么？Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。什么时候我会用 Hook？如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数

假如一个组件有很多属性，当然可以如下这样做。const Profile;let name = 'viking', age = 10, gender = 'Male';let component = <Profile name={name} age={age) gender={gender} />;但是，当这样的属性特别多的时候，书写和格式看起来就会变得很复杂，所以JSX有一个...

（1）业务代码里面的异步请求需要 try catchajax 请求，使用 try catch，错误提示后端返回,并且做一些失败后的状态操作例如进入列表页，我们需要一个 loading 状态，然后去请求数据,可是失败之后，也需要把 loading 状态去掉,把 loading 隐藏的代码就写在 finally 里面。getStudentList = async () => { try ...

(1)对象this.setState({})(2)函数，一般是用于在setState之前做一些操作this.setState( () => { // TODO console.log('') return { a:300 } })(3)第二个参数，一般是用于在setState之后做一些操作this.setState({...

Mac上安装create-react-app,经常出现安装不上，这里说一下办法：方法一：sudo npm install -g create-react-appcreate-react-app my-reactcd my_codeyarn start方法二：yarn global add create-react-appcreate-react-app my-appcd m...

react项目如何按需加载antdDesign组件分为两种情况：第一种手写的，不使用脚手架：1.安装：npm install ant --save2.引用：import { Alert, Form, Input, Button, Checkbox, Row, Col, message, Modal, Icon } from 'antd';&nbsp;3.安装组件npm...

前段时间刚从携程离职，中间面试了几家公司，因为本人 用过 backbone,underscore,jquery,vue,react 所以总有人问我这几个语言之间的区别。在这里我只说一下，我对vue和react的理解。1- vue 和 react 都是一门前端开发语言。2- vue 和 react 都有自己的生态圈（全家桶）。vue 全家桶Vue有著名的全家桶系列:vue-router（h...

1- 快速创建项目npm install -g create-react-app //---全局安装react脚手架create-react-app my-app //---通过react脚手架创建my-app项目cd my-app/ //---打开my-app项目npm start ...

在 React16 新版本中，新引入了 React.createRef 与 React.forwardRef 两个 API，有计划移除老的 string ref，使 ref 的使用更加便捷与明确。如果你的应用已经升级到 React16.3+ 版本，那就放心大胆使用 React.createRef 吧，如果暂时没有的话，建议使用 callback ref 来代替 string ref。strin...

这个问题想必很多人都会遇到过，这里我说一下怎么获取URL中的参数。 如图获取purchaseOrderNo中的值。这个时候我们需要使用一个东西： `queryString.parse(_this.props.location.search)`通过这句话就可以获得，我们在purchaseOrderNo传入的值。注意点： 如果这个值需要在页面中及时获得，这个时候就需要注

在平时项目中，为什么我们都会采用组件化的思想去编写代码？其实的原因很简单！！！ 我们在写代码的时候，写完以后发现这个代码会出现在其他地方，想要复用，或者同事感兴趣，想使用这个代码。这个时候我们就需要通过组件化来实现代码的复用了，否则工作量真的是………..接下来通过一个例子大概分析一下： 这个是一个点赞的功能~ 如果给我写，那 简单 啊HTML...

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;React 实例&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/react/15.4.2/react.m

一般设置props的默认值有两种方式，下面通过一个例子说明一下。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;React表单&lt;/title&gt; &lt;script src="https://c

这里只讲一个react的实现方式，我们使用react-copy-to-clipboard首先安装 react-copy-to-clipboardnpm install –save react react-copy-to-clipboard或者cnpm install –save react react-copy-to-clipboard或者 yarn add re...

如上图所示，是一个利用antd制作的一个表格，现在讲微信里面的字段设置成掩码格式。代码：const columns = [ { title: '用户编号', dataIndex: 'originalId', key: 'originalId', width: 70, }, { ...

vue项目禁止eslint:react项目禁止eslint:找到webpack.base.conf.js文件，然后注释掉里面 红色框圈住的内容即可。

以前写过一篇关于原生JS和vue项目中日期格式化的文章，现在写一下关于react项目中日期格式化的方式。使用react的 momentimport moment from &amp;amp;quot;moment&amp;amp;quot;;let statusPassTime = moment(parseInt(entity.statusPassTime)).format('YYYY-MM-DD');/*说明*/let 格式化后的...

问题：使用 antdesign 下拉框的默认值是状态值，而不是状态值对应的文案？model层传递的数据view层在表单中设置的值解决方案：在默认值的后面加上一个空字符串进行转换...

如上图所示，是一个单选按钮，如果需要获取单选按钮的默认值，那样怎么处理呢？代码：class FilterForm extends ListFilterForm { constructor() { super(); this.state = { //先声明变量并初始化 isAll: true } } handleSubmit= ...

这里讲解一下react组件中常见弹框的显示隐藏~ 在这里主要涉及一个知识点，就是父子组件的通讯。如图所示：1- 点击编辑按钮的时候弹出对应的弹框。2- 在弹框中点击确定或者取消的时候弹框消失。代码如下所示：父组件：/*设置默认值*/ constructor() { super(); this.state = { visibl...

react获取state的值并且修改分为两种情况：在视图层处理：//在 state 中饭设置初始值state={ name:'', age:'' }//通过 控制一个事件触发然后setState 去设置setName=()=&gt;{ this.setState({ name })}在model层处理：vie...

这个例子很简单，看一下就懂：class Son extends React.Component { render() { return &amp;lt;input onChange={this.props.onChange}/&amp;gt;; }}class Father extends React.Component { constructor() { super();...

React设计setState方法就是为了重新渲染页面看看下面的代码实现的结果：state = { value ： 0}function test() { this.setState({ value: this.state.value + 1 }); this.setState({ value: this.state.value + 1 }); thi...

如图所有，当我选择公司性质为 “默认” 或者 “个人” 时候 ‘公司全称’字段是隐藏。当我们选择公司性质为“公司”时 ‘公司全称’字段展示。默认状态：公司性质为“公司”这个功能该如何实现呢？思路： 1.在‘公司性质’这个 select框上面绑定一个 onchange事件，每次变化 获取到当前select框 对应的值。2.将获取到当前select框的值写一个接口...

这里看一下ant design中表格添加loading效果。在页面进来，获取数据时候获取到数据的时候实现方法： 这里只需要在要渲染的表格中添加，loading={XXXX} 即可。大括号里面的值如果是true，则显示loading效果，如果是false则不显示loading。