天心天地生的博客

在dva的model中，详情接口返回了内容详情的的字段（该字段存储的是富文本的内容），但是该字段返回的是oss链接，需要将oss转换为html才能正常展示，所以我需要再详情接口返回之后，批量获取oss链接对应的html。

在同步方法内执行setState,多个setState会被合并成一个执行在异步方法内执行setState,多个setState会分开执行/*** desc: 打开控制台查看打印结果// 列表刷新 const [ results1 , setResults1 ] = useState('results1');console . log('请求结束' , res . json());saveData(` 异步- ${ new Date() . getTime() } `);

在列表搜索条件变化时,需要保存搜索条件,但是保存搜索条件这个方法不需要在组件挂载时执行,即如何使 useEffect 在渲染时不执行，只在数据变更时执行(即模拟类组件的componentDidUpdata)

PortalsPortal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。ReactDOM.createPortal(child, container)第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。用法通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点：render() { // React 挂载了一个

问题描述使用taro开发h5应用,路由跳转时发现页面的生命周期componentDidMount,componentWillUnmount没有触发taro版本:3.0.27框架: react编译命令: npm run build h5解决过程查看Taro官方文档,页面组件生命周期的触发机制,Taro的生命周期不完全和react的一致.观察路由跳转可以正常触发componentDidMount的页面的写法,找不同发现是否正常触发生命周期,和路由跳转时使用的方法有关查看Taro官方文档

本文主要是针对基于umi@3的前端框架的国际化方案国际化的项目，之前实践的很少，上次踩了一次坑，发现不少问题，在这里总结一下，希望大家能提前感知，避免踩坑。国际化要做什么事？国际化要求从产品中抽离所有地域语言，国家/地区和文化相关的元素。说白了就是，我们的产品，要给外国人使用，当他们访问我们的站点时，需要展示他们熟悉的语言。我们在做国际化的时候，主要可以分为以下两类：静态内容，指的是我们代码中编写的固定文本内容，包括业务代码，组件，组件库等。动态内容，一般是服务端返回的内容。如何获取用户的

React Hooks是什么Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。React Hooks的目的react有一个严格的规则:所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。函数组件有重大限制，必须是纯函数，不能包含状态，也不支持生

dva model 中使用yield put 执行effects中另一个方法，发起请求，不会等这个请求执行完才执行下面的方法。问题背景问题描述dva model 中使用yield put 执行effects中另一个方法，发起请求，不会等这个请求执行完才执行下面的方法。 effects: { *effectAll({ payload }, { put, call }) { console.log('effectAll-start') yield put({ type.

前言在做antd表单时通常会用到select组件,如何修改antd组件的默认样式想必大家都知道,那么我们如何将select组件修改为UI图中的样式呢,如下图所示直接修改cssjsimport React from "react";import { Select, Icon } from 'antd';import styles from "./MySelect.less";const { Option } = Select;class MySelect extends Reac

前言在做antd表格时通常会用到table组件,如何修改antd组件的默认样式想必大家都知道,那么我们如何将表格的奇数行和偶数行设置为不同样式呢,如下图所示react中覆盖antd组件的样式渲染时给奇偶行设置不同类名利用Table组件官方API接口修改行的类名,通过类名设置不同行的样式.js文件TableChangeDom.js/** * @file 列表奇偶行设置不同样式;渲染时给奇偶行设置不同类名 * */import React from "react";import {

简述本文将常用的react生命周期绘制成了一张流程图,便于理解和记忆;react中每个组件都包含“生命周期方法”，我们可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。react常用生命周期流程图参考资料生命周期图谱...

简介react-beautiful-dnd基于react的一个组件库,主要包含三个组件.DragDropContext : 用于包装拖拽根组件，Draggable和Droppable都需要包裹在DragDropContex内Droppable 用于包装你需要拖动的组件，使组件能够被拖拽（make it draggable）Draggable 用于包装接收拖拽元素的组件，使组件能够放置（dropped on it）API参数介绍1. DragDropContext为了使用拖放功能，您需要将R

你有没有遇到过这样的情况！比如你们有四种（或更多）环境：开发环境（本地调式代码环境）、测试环境（脏数据环境）、预生产环境（无限接近生产环境）、生产环境（正式环境或线上环境）等等环境。而对于不同环境你的静态资源host地址或者你的用户id等等可能是不一样的只区分开发环境和生产环境使用默认的环境变量 process.env.NODE_ENV运行npm run startconsole.log(process.env); // > {NODE_ENV: "development"} //.

在我们编写组件的时候，常常会遇到组件内部使用组件的情况；我们直接将内容写在组件内部，内容是无法渲染的那么我们应该如何再组件内部使用组件呢？包含关系有些组件无法提前知晓它们子组件的具体内容。在 Sidebar（侧边栏）和 Dialog（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况。我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中：function FancyBorder(props) { return ( <div cl.

井字棋完善内容如果你之后还会有充裕的时间并且想练习你刚掌握的新技能的话，这里有一些可以完善的游戏功能实现供你参考，列表是由易到难排序的：在游戏历史记录列表显示每一步棋的坐标，格式为 (列号, 行号)。在历史记录列表中加粗显示当前选择的项目。使用两个循环来渲染出棋盘的格子，而不是在代码里写死（hardcode）。添加一个可以升序或降序显示历史记录的按钮。每当有人获胜时，高亮显示连成一线...

背景介绍在react的componentWillReceiveProps(nextProps)生命周期中，可以在子组件的render函数执行前获取新的props，从而更新子组件自己的state。这样的好处是，可以将数据请求放在这里进行执行，需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染...

react中覆盖antd组件的样式由于业务的个性化需求，我们经常会遇到需要覆盖组件样式的情况，这里举个简单的例子。antd Select 在多选状态下，默认会展示所有选中项，这里我们给它加一个限制高度，超过此高度就出滚动条。TestPage.tsimport { Select } from 'antd';import styles from './TestPage.less';cons...

编码实战import {Table, ConfigProvider } from 'antd'; // 引入ConfigProvider全局化配置import zhCN from 'antd/es/locale/zh_CN'; // 引入中文包// ...return ( <ConfigProvider locale={zhCN}> <Tab...

使用相对路径<img className="img" src={require('./img/RDS.png')} alt=""/> // 相对路径使用模块引入import icon from "./img/RDS.png";<img src={icon} alt="" width="35" height="35" />...

编码实战import React, { Component } from 'react';export default class Parent extends Component { render() { return ( <div> <h1>我是父组件</h1> <Child getChil...

全局安装create-react-appnpm install -g create-react-app使用create-react-app创建项目create-react-app mobx-demo注意：名称不能使用大写字母运行npm run eject或者yarn eject 使得配置可修改进入指定文件夹cd mobx-demo使我们可以修改配置文件npm run eje...

编码实战我如何获取字符串,并将其转换为jsx？例如,如果我从textarea引入一个字符串,我怎么能将它转换为React元素;class YourComponent{render() { someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></d...

Dva 概念#数据流向数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开...

React Router中的组件主要分为三类：import { BrowserRouter, Route, Link } from "react-router-dom";路由器，像<BrowserRouter>和<HashRouter>路线匹配器，例如<Route>和<Switch>导航，喜欢<Link>，<NavLin...

快速开始npm install -g create-react-app create-react-app demo-app cd demo-app安装npm install react-router-dom项目构建删去src目录下的所有文件，build // 编译目录config // webpack配...