sunzhen15896的博客

setstate

闭包

react问题

omit

http-server

react内存溢出

React.Fragment

接口调用死循环

折线图拐点自定义样式

css相关问题

Modal调用方法没有全局样式的解决方法

css样式相关

interface PointLayerType { type?: string, url?: string, MapZoom?: any; cameraList?: any[]}const ZoomRatio = { 0: 0.75, 1: 0.95, 2: 1.15, 3: 1.35, 4: 1.55, 5: 1.75,}; const width = 35 * ZoomRatio[MapZoom];//报错 类型“undefined”不能用作索引类型

import './app/lib-generate-test-usersig.min.js';const generator: any = new LibGenerateTestUserSig(sdkAppId, SECRETKEY, EXPIRETIME); const userSig = generator.genTestUserSig(userId);

绝对引入必须要在相对引入之前例如`import "../../utils"import _ from 'lodash'会报错，因为相对引入在绝对引入之前解决方案：1.更改引入顺序import _ from 'lodash'import "../../utils"2.更改eslintrc.jsmodule.exports = { "extends": ["taro/react"], "rules": { "react/jsx-uses-react": "off",

使用styled渲染antd组件，导致每次点击组件都会重新渲染，出现日期范围选择框无法重新选择，解决方法：const StyledDateRangePicker = useMemo(() => { return WrapDateRangePicker; }, [config?.value, prefixCls]);使用useMemo不渲染styled组件...

<span style={{display:'inline-block',fontSize:'16px',zoom:'0.5',color: '#798295'}}>新能源</span>=> 想要实现字体大小为8px，用16px缩放0.5倍即可设置zoom:0.5

const demoImages = [ {url:'https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80', desc:'行驶证照片'}, {url:'https://images.unsplash

const handleClose = (event: React.MouseEvent<Document, MouseEvent>) => { if (anchorRef && anchorRef.current && event.target instanceof Node && anchorRef.current.contains(event.target)) { return } setOpen

redux-saga 使用yield报ts类型错误解决方案：*getPlanById( { payload: id }: any, { call, put, select }: any ) { const res: any = yield call(planViewService.apiGetPlanById, id); if (res.code === 0) { message.info('加载数据成功'); } else {

<Switch> <Route exact={true} path="/" render={()=> <Redirect to="/organization/all" push />}/> <Route path="/repository" children={() => ( <Switch>

const userInfo = [ { id:1, name:"张三", age:25, sex:"male" }, { id:2, name:"李四", age:18, sex:"male" }, { id:3, name:"王五", age:21, sex:"female"

git分支合并分支比如dev1合并dev2的代码直接在dev1里git merge dev2如果有冲突，解决冲突之后提交代码如果dev2后续有新的更改git merge dev2的时候会遇到然后重新git commit即可

const [isRefresh, setIsRefresh] = useState(false); useEffect(() => { isRefresh && setTimeout(() => setIsRefresh(false)); }, [isRefresh]); const updateChild = () => { setIsRefresh(true); } return ( !isRefresh &a..

react 定时器修改状态需要用到useRefconst like = useRef(0);setInterval(()=>{ console.log(like.current)},1000)采用useRef,作为组件实例的变量，保证获取到的数据肯定是最新的。返回一个可变的ref对象，该对象只有个current属性，初始值为传入的参数(initialValue)。返回的ref对象在组件的整个生命周期内保持不变当更新current值时并不会re-render，这是与useState不同

const [dates, setDates]:any = useState(); const [hackValue, setHackValue]:any = useState(); const [value, setValue]:any = useState([ moment(moment(new Date()).subtract("days", 7).format("YYYY-MM-DD")), moment(moment(new Date()).format(dateForma

//编写ReactWebsocket组件import React from 'react';import Websocket from 'react-websocket';interface ReactWebsocketProps { onMessage:(data:any)=>void; onOpen:(data:any)=>void; onClose:()=>void; url:any; reconnect:any; debug:a

修改popOver组件的样式的时候发现定义了className不起作用，antd的样式覆盖不了原因：不支持className，而是tooltip的overlayClassName<Popover content={renderContent()} title={''} overlayClassName={styles.pop} trigger={'click'}> <div className={styles.tipIcon}/></Popover&gt

使用SpeechSynthesisUtterance进行语音播报文字的时候，发现刷新浏览器不能播放声音的问题原因：浏览器对于语音，视频等会有限制，不能允许直接播放，必须进行至少一次点击事件解决方案：随意点击页面上的内容，即可重新触发...

let list = [ { id: 1, name: "zhangsan" }, { id: 2, name: "lisi" }, { id: 3, name: "wangwu" }];let newItem = { id: 2, name: "xiaoming", sex: "female" }; list = list.map(t => { return t.id === newItem.id ? newItem : t;}

https://elemefe.github.io/react-amap/components/about使用react-amap

<ListView dataSource={dataSource.cloneWithRows(data)} ref={node => handelRef(node)} initialListSize={sessionStorage.getItem('dataLength') ? sessionStorage.getItem('dataLength') * 1 : 10} renderF

const handleSearch = (input: any, option: any) => { if (option && option.props && option.props.children) { return ( option.props.children === input || option.props.children.indexOf(input) !== -1 ); } e

css用body套一下所有样式body{ .form { margin: 20px; .flexRow { display: flex; flex-direction: row; } .inputOther { width: 150px; margin-left: 10px; margin-right: 10px; text-align: center; border-top:

componentDidMount() { const script = document.createElement("script"); script.src = "/scripts/xxx.js"; script.async = true; document.body.appendChild(script); }

复制代码onChange =（key）=> {　　this.setState({　　　　activeKey:key　　})}...<Tabs onChange={this.onChange}> <TabPane key='1'>　　　　{ aciveKey == '1' ? <Query/> : null }　　 </TabPane>　　 <TabPane key='2'>　　　　{ aciveKey ==

报错原因：点击事件获取this.props.xx报错是由于点击事件没有绑定到dom元素上 handleBatchCancel(){ console.log('handleBatchCancel') console.log(this.props.checkedList)//报错 }解决方案：用bind绑定constructor(props: any) { super(props); this.handleBatchCancel = this.handleBatchC

写代码过程中，发现在react的tsx中绑定原生事件window.addEventListener当前页面可以监听到事件，其他页面也可以监听到事件，这就会产生问题，比如A页面监听滚动事件，B页面不需要监听滚动事件，但是B页面也会触发，此时就会产生bug。正确做法是在A页面绑定事件后，页面卸载的时候清除监听事件。 constructor(props) { super(props); this.scrollHandler = this.handleScroll.bind(this);

<Tabs tabs={tabList} initialPage={0} // page={tabIndex} tabBarPosition="top" tabBarBackgroundColor={"transparent"} tabBarActiveTextColor={"#3A3A47"} tabBarInactiveTextC

场景：在上传图片列表的时候，点击图片右上角的x删除已上传的图片块的时候，使用hooks的setFileList(files)，发现视图并不会更新，图片块还在const [fileList,setFileList] = useState([])const deleteImgItem = (index,files) => { files.splice(index,1); setFileList(files) }解决方案：将setFileList(files