React论坛 今日: 0|主題: 520|排名: 78 

前言 在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。在我看来，使用 React Hooks 相比于从前的类组件有以下几点好处： 代 ...

前言 最近在给自己的脚手架项目转到TypeScript时，遇到了一些麻烦。 项目之前采用的是react + react-redux + redux-thunk + redux-actions +redux-promise的体系。 当项目转TypeScript时,react和react-redux这种完美转换。 redux-actions转换也初步完成，但是各种为了适应TypeScript的 ...

21年12月3日，阐述上有问题：应该将问题拆分，不该将代码整一大堆，看着很不舒适   目标需求：1. 实现视频播放 2. 进度条 3. 进入全屏 目标图是这样的：       需要三个组件 1. 播放视频组件， react-native-video    官网地址 https://www.npmjs.com/package/react-native-video#allow ...

使用一个小例子来演示React中样式的使用，如下图，做一个静态的评论列表组件：  1.创建两个JSX文件：CmtItem.jsx和CmtList.jsx CmtList.jsx: import React from 'react'; //导入评论项子组件 import CmtItem from '@/components/CmtItem' //使用class关键字定义父组件 export default class CmtList extends React. ...

⒈初始化React项目（略） 　　请参考　　初始化一个React项目（TypeScript环境） ⒉集成React-Router 　　在React世界里，公认最好用的路由是React-Router。那我们直接来集成它吧。 yarn add react-router history #如果是type环境 yarn add react-router @types/react-router history @types/history ⒊配置React-Router ...

1、React导出excel功能 <Button colors="primary" onClick={_this.export}> 导出 </Button> export=()=>{ let searchObj = {searchMap:{}}; let {searchMap} = searchObj;//查询条件 let downUrl = `api/export` exportFile(downUrl,{searchMap}) } 1> 使用Blob对象，从服务器接收 ...

目录： 1. 类组件有自己的状态 2. 继承React.Component-会有生命周期和this 3. 内部需要一个render函数（类组件会默认调用render方法，但不会默认添加，需要手动填写render函数，并return一个能渲染的值。） 4. 类组件的基本架构 5. constructor里边添加自己的属性和状态、方法 a. 写了constructor就要写super b. 如果 ...

利用业余时间写了个简单的项目，使用react+node.js做的一个全栈实践项目，前端参考了[React-Admin-Starter](https://github.com/veryStarters/react-admin-starter)这个项目，这个项目的自动配置路由，自动页面骨架的思路很新颖。后端是node.js+express提供接口访问，最主要的内容是mysql.js的使用和使用nginx反向代理来跨 ...

  双十一剁手节过去了，大家应该在很多网页中看到了数字翻牌的效果吧，比如倒计时、 数字增长等。相信很多人都已经自己独立实现过了，我也在网上看了一些demo，发现HTML结构大多比较复杂，用了4个并列的标签来放置前后两个“牌”。本文就来讲解下，如何进一步精简HTML，让结构简单，让JS方法封装得易使用。先来看看 ...

2019-08-24 07:00:00 文摘资讯 阅读数 1364  收藏 博文的原始地址     之前我们已经掌握了useState的使用，在 class 中，我们通过在构造函数中设置 this.state 为 { count: 0 } 来初始化 count state 为 0：       class Ex ...

从本栏起，我们开始系统的学习 React，本篇文章主要讲述 正式学习知识点之前需要做一些准备工作。 既然是学习，那么还是要看官方的文件，这边提供了预习资源： 预习资源 React create-react-app 同时我的开发环境是： 开发环境 vscode下载 node.js下载 起步 可以直接运行下面的 命令行，也可以使用 npx ： # 安装官方 ...

children是什么意思呢？就是我们拿到组件内部的props的时候，有props.children这么一个属性，大部分情况下，我们直接把 props.children 渲染到 JSX 里面就可以了。很少有情况我们需要去操作这个 children 。 但是如果一旦你需要去操作这个 children 。我们推荐使用 Reac ...

　　React Hooks都是以use开头的函数，普通函数看待即可，接受参数，有返回值。只不过它们有特定的使用规则，只能在函数顶层使用，和特定的作用，比如useState使函数组件拥有了状态，useEffect处理组件的副作用 const App= () => { const [message, setMessage]= useState(''); // useState接受一个参数，返回一个数组， ...

前言 本篇文章默认您大概了解什么是TypeScript，主要讲解如何在React旧项目中安装并使用TypeScript。 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多，但都是一些语法概念或者简单例子，真正改造一个React旧项目使用TypeScript的文章很少。 所以在这里记录下改造一个React项目的实践。 博客内容部分参照 TypeScri ...

原文链接：http://www.pianshen.com/article/9144689534/   在Antd中尝试写了一下, 感觉还可以, 配合后端来判断是否是新用户从而可以对新用户进行引导操作.   效果: IntroJs引导步骤 给用户提示或介绍如何操作 何时使用 用户初次使用时 如何使用 npm install intro.js –save 代码演示 开始引导 基本用法 最简单 ...

ref 的功能，在 react 当中。我们写了一个组件，在这个时候，我们的 render function 里面我们会渲染一系列的子组件或者 dom 节点，有时候我们会希望有这样的需求，就是我们要获取某个 dom 节点，或者是某个子组件的实例。去对他进行一些手动的操作，而不仅仅是 pr ...

有一个需求是这样的。 一个组件里若干个区块。区块数量不定。 区块里面是一个正六边形组件，而这个用 SVG 和 canvas 都可以。我选择 canvas。 所以就变成了在 react 中使用 canvas 的问题。   canvas 和 SVG 有一个很大的不同。 SVG 是标签，所以HTML怎么整，SVG 就怎么整。 而 canvas 是一套相对独立的 web API，以 c ...

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

一、React调试工具 1、安装 react-developer-tools，在chrome应用商店进行下载，因为网络限制原因，我们可以使用火狐浏览器进行安装下载 a、打开火狐浏览器的附加组件 b、搜索react-developer-tools进行安装 React Developer Tools会自动检测React组件，不过在webpack-dev-server模式下，webpack会自动将React组件放入到 ...

目录： 1. 组件名字首字母一定是大写的 2. 返回一个jsx 3. jsx依赖React，所以组件内部需要引入React 4. 组件传参 a. 传递. <Component list={ arrData }><Component> b. 接收. function Component( props ){...} c. 使用. const { list } = props，list就是参数数据 5. 缺点 ...