React.js
关注
分享
扫一扫
丰色木夕
程序员,21世纪中国最伟大的职业之一
展开
-
React.js报错Did you accidentally export a JSX literal instead of a component?
React.js报错 Did you accidentally export a JSX literal instead of a component?子组件使用了某个子组件参数变量（该参数期望的是一个react组件），在子组件的render中渲染，且使用的是JSX 标签渲染。而该参数传递过来的是<></>。这是会报错Comp子组件//Comp子组件render() { const { showTitle } = this.props const CompShowTitl原创 2020-07-09 00:31:13 · 1783 阅读 · 0 评论 -
axios前端跨域请求错误问题
跨域问题描述服务端nginx已配置跨域允许add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control原创 2020-05-16 15:49:52 · 981 阅读 · 0 评论 -
atnd 3.x版本中，如何为表单设置、绑定默认值
const { getFieldDecorator } = this.props.formgetFieldDecorator(id, options)(<></>)经过form.create后， 可以从组件props中获取form。经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） o...原创 2020-03-30 09:41:43 · 875 阅读 · 0 评论 -
React 如何向div中插入原生的HTML
React开发过程中，有时需要使用原生的HTML，用于动态渲染HTML，比如存在数据库中的，可编辑的HTML实现代码如下：const htmlString= '<p>Hello World</p>'render () { return ( <div className='editor-wrapper' dan...原创 2020-03-21 22:14:22 · 6300 阅读 · 0 评论 -
react动态修改渲染head中的内容
有时需要动态修改head中的内容,如:1、修改页面<title>标题2、修改<meta>3、动态添加资源 <link> <script> 等import React from 'react';import {Helmet} from 'react-helmet'; class myComp extends React.Component...原创 2020-03-10 16:49:14 · 2336 阅读 · 0 评论 -
React.Component 与 React.PureComponent
React.Component 与 React.PureComponent通常创建组件时，我们会继承Component 如下所示，这时我们可通过shouldComponentUpdate方法进行条件渲染。当props与state发现改变时，就会进入shouldComponentUpdate ，当该方法返回true时，则进行重新渲染。import React, { Component } fro...原创 2020-02-29 20:51:01 · 185 阅读 · 0 评论 -
关于React中Fragment及Helmet标签
Fragment标签在布局时，有事会看到<Fragment>标签，这个标签有什么用呢？React.Fragment官方文档：React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。Fragments 看起来像空的 JSX 标签，即：const comp = ()=>{ return ( ...原创 2020-02-29 14:20:23 · 1300 阅读 · 0 评论 -
antd 使一个组件挂载到指定dom元素内
antd 使用一个组件挂载到指定组件内antd中的许多组件中的跳出浮框都是直接挂载到body下来进行定位的（比如modal的遮罩，某些组件带的ToolTip等）。然而，有时，我们希望将这些div挂载到某个div下，或挂载到父组件中时怎么实现呢？1、挂载到任意div中<div id="parentBox" HelloWorld</div><Slider ...原创 2020-02-20 16:40:41 · 8187 阅读 · 1 评论 -
TS开发React语法问题-如何声明子组件的属性
React 开发的语法问题-声明子组件属性的问题1、自定义的React组件，父组件引用子组件后，给子组件传属性时，总是出现警告，说该子组件不存在该属性// 子组件class MyComp extends React.Component {}// 父组件class parentComp extends Recat.Component { render(){ const tmpSrc...原创 2019-12-15 14:09:42 · 9857 阅读 · 0 评论 -
批量渲染数组（元素为react组件)的方法
一种实现批量渲染对象元素（元素为react组件）的方法一种使用批量渲染 数组（元素为react组件)的方法思为：可直接对象一个数组进行渲染输出，前提是，数组元素应为react组件参考代码如下<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>React 实例&...原创 2019-12-07 22:44:39 · 1797 阅读 · 1 评论 -
如何使用dva实现组件间的通讯
背景使用 yarn create umi 创建了一个干净的基于umi+dva的react项目。在遇到组件之间的通讯时，需要使用到dva。如何使用dva实现组件之间的通讯呢？步骤如下：1. model定义export default { namespace:'settingDrawer', state: { visible: false }, reducers: {...原创 2019-12-07 22:28:44 · 1920 阅读 · 2 评论 -
触发dva的dispatch后，组件视图未重新渲染
触发dva的dispatch后，组件视图未更新使用dispatch方法后，正确调用model下的reducers的某个方法，但是组件更新React组件中的render()方法未重新渲染dispatch方法正常调用state已正确更新组件中也通过this.porps，正确获取到状态但是就是不触发更新export default { namespace:'settingDrawer...原创 2019-12-07 21:46:07 · 3278 阅读 · 0 评论 -
从零开始搭建antd design pro项目
本文介绍 如何重零开始搭建 基于react的antd admin pro项目。从多零开始呢？重刚装好操作系统开始。react是三大前端框架，antd admin是蚂蚁金服开发在中端应用框架，这篇文章将使用umi.js来搭建上述系统。重要用官方URLumi.js 官方手册antd admin pro 官方手册antd admin pro 预览路径antd admin pro 官方g...原创 2019-12-05 15:44:10 · 2899 阅读 · 0 评论 -
react.js之antd中如何修改覆盖默认样式及样式引用
如何覆盖antd的默认样式step.1 通过浏览器调试面板，找到需要修改的样式class 名如下所式 .ant-time-picker-inputstep.2 添加自定义样式mystyleindex.less样式文件中添加如下样式.mystyle :global(.ant-time-picker-input) { width: 120px;}step.3 如何在 compon...原创 2019-12-03 10:47:38 · 6727 阅读 · 1 评论 -
vue.js 与 react.js 对比
如果选择Vue与ReactNo.评判理由Vue.jsReact.js1喜欢模板搭建vx2简单和“能用就行"vx3希望小和快vx4大型应用程序xv5适用于Web端和原生APPxv6最大的生态系统xvVue的优势是模板和渲染函数的弹性选择简单的语法和项目配置更快的渲染速度和更小的体积React...原创 2019-11-04 17:58:34 · 487 阅读 · 0 评论 -
umi快速上手笔记
1.安装基本环境step.1 安装node及npm(npm自带安装)node版本需要8.10以上step.2 安装cnpmstep.3 安装yarn，使用yarn管理npm依赖$ cnpm i yarn tyarn -g# tyarn为国内源2.安装umistep.1 全局部安装umi$ tyarn global add umi如出现umi:command not...原创 2019-11-04 15:35:21 · 1084 阅读 · 0 评论 -
React之umi入门学习笔记
背景首次接触react框架，拥有的基础为：现有技术储备水平备注javascripthtml,cssjQueryReactnodenpmumi及react 一同学习，遇到的问题一起做下笔记备忘1. 404页面的创建问题404页面一定要放在src/pages/ 下，而不是放在src 下面，要注意，否则路由找到你定...原创 2019-11-04 15:35:04 · 961 阅读 · 0 评论