Codernmx

❤️在繁华中自律，在落魄中自愈❤️父组件的关键代码import React, { useState, useEffect, useRef } from 'react';import TabPanes from './Tabans'; //引入子组件function Deposit(props) { const childRef: any = useRef(); //关键部分 //注意这里使用子组件的时候需要childRef={childRef} return (<TabPa.

我看了 下输入不了的网页结构 发现好像是有个啥东西遮住了样。。结果发现，是因为后边那一个没有指定 span 导致他所占宽度为一整行了，也就覆盖了前边的 两个输入框，导致输入不了信息。解决：给后边的也设置上span...

解决 ：Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style在vscode中可以直接选择更换

解决React错误：Error: A React component suspended while rendering, but no fallback UI was specified.Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.主要是在使用lazy（）懒加载组件的时候报错需要加上fallb

解决React 错误Unhandled Rejection (TypeError): Invalid attempt to spread non-iterable instance主要是自己在使用 react + antdesign 的upload组件的时候遇到的如果直接赋值给fileListTemp e 的话就会出现当前错误这里需要改的就是把e.fileList 赋值回去就行...

在使用react 条件渲染的时候 AND运算（&&）{this.state.lineInfoList_new.length > 0 && (xxx）}这里的判断 如果直接写一个this.state.lineInfoList_new.length界面就会无缘无故出现0改一下判断语句就行...

获取 antdesign form 表单的所有填写值（getFieldDecorator）this.props.form.getFieldsValue()限制input 只能输入数字rules: [{ required: true, pattern: new RegExp(/^[0-9]\d*$/, "g"), message: '请输入箱仓容'

效果：官网文档需要使用到momentimport moment from 'moment'; //修改的时间限制 disabledDateUpdate = (current) => { return current && current < moment(this.state.updateCreateDate).endOf('day'); }

onChange={this.setSearchParams.bind(this, 'customerName')}**注意**：name和e对应位置和onChange事件里面位置相反，可以打印出来看下（是个坑）setSearchParams (name, e) { if (e.target.value !== '') { this.setState({ searchParam: { ...this.state.searchParam,

在官方文档中有一个value 和一个defaultValue，在使用defaultValue的时候你会发现，展示默认的值是可以的，但是如果你修改了那个值页面数据是不会更新的。如果你去使用value的时候又会发现他的输入框你输入不了任何值。解决办法：<Input key={this.state.name} defaultValue={this.state.name} />加一个key在看网上其他解决方案的时候看到可以通过，onChange来得到他event.target.value的

首先看看这玩意//定义对象let person={};//为对象添加属性person['age']=18//为对象添加属性（属性为参数变量）let temp='name'person[temp]='jary'console.log(person)//输出结果//Object {age: 18, name: "jary"}下边是我在实现一个表格排序的时候遇到的,后端哥哥不给排序接口…那就自己整一个排序噻,数据还是比较简单.this.state.tableListTest 的数据

报错信息umi.js:68474 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.其实不难看出是它提示 你应该在div标签中写一个select这里造成错误的原因就是p标签内只能包裹内联元素, 不能包裹块级元素.写了一堆拉胯代码？？？告辞！！！！...

一、首先来看看需求，主要就是一个表格的合并这里是官方文档给出的关于合并的方法表头只支持列合并，使用 column 里的 colSpan 进行设置。 表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。根据他给出的demo可以看出是要合并的第一个数据设置他的colSpan ，而后边不展示的数据给他设置colSpan /rowSpan 为0 就可以，但是这样子的话，根据后端返回的不确定数据就好像有点不好整了是吧（要是后端能直

就离谱，也不报错，也不提示，setState就是不更新值，气不气，哈哈哈

最终效果如图：做完发现其实是有点蠢的实现方案，但是目前自己没有找到更好的方法，（这玩意存在不同分辨率不按照轨迹来的问题），因为在实现的时候是用的一个背景图作为轨迹，每一个点是自己找出来的，图片缩放可能导致 车车不在轨迹上。算了以后有时间在解决吧代码：html（react写的）css .miniTrain { width: 40px; height: 40px; position: absolute; animation: myfirstMin 10s;

效果className={`${this.state.isClickButtonOne ? 'active' : ''}`}通过点击事件来修改isClickButtonOne 的值实现动态this.setState({ isClickButtonOne:true, });顺便记录一下react ant design button 中 光晕效果 只要添加一个class名为active 就可以添加保持光晕效果，但是要去掉效果的话需要自己另外想办法ant-click-anima

官方文档地址：https://ant.design/components/select-cn/其实通过文档自己也可以解决主要是添加如下代码showSearch optionFilterProp="children"ok 完美解决

React 跳转页面的时候携带参数方法很多，后边接着更细吧，现在是记录自己遇到使用过的方式1、通过state，在跳转的时候router.push({ pathname: '/track', state: { isNewIndex:2 },});track 页面接收数据console.log('传递过来的isNewIndex',this.props.location.state.isNewIndex)keyi 参考https://www.cnblogs

React 注册模块报错Missing message: “menu.xxx” for locale: “zh-CN”, using default message as fallback根据他的提示信息添加一个需要添加的信息就好了

初始化在组件初始化阶段会执行constructorstatic getDerivedStateFromProps()componentWillMount() / UNSAFE_componentWillMount()render()componentDidMount()

Table组件中使用columns={columns}，columns的数据中有重复的键值去掉重复的就好了

index.js:1 Warning: Each child in a list should have a unique “key” prop.原因: 这是由于在进行组件遍历的时候没有加一个key来进行区分每个组件找到它提示的组件进行修改可以添加key={index}

需要import导入

React实现锚点滚动使用标签, 会触发路由跳转主要代码class HomeView extends Component { scrollToAnchor = (anchorName) => { if (anchorName) { let anchorElement = document.getElementById(anchorName); if(anchorElement) { anchorElement.scrollIntoView(); }

ctrl+shift+p调出设置界面在设置中添加配置如下 "emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": { "javascript": "javascriptreact" },