learning项目总结

最新推荐文章于 2024-07-18 10:24:18 发布

滑梯plus版

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量98

点赞数

分类专栏：学习新内容文章标签： javascript 前端开发语言 react.js 组件

本文链接：https://blog.csdn.net/qq_56918166/article/details/134506012

版权

学习新内容专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Dialog组件：当背景图片是不规则情况，可以把内容写在传递函数中：modalRender={() => ()}，而不是在>后面写。
所有的点击按钮都要加上cursor：pointer，会让用户知道在哪儿点击。
对于需要兼容undefined / is not function的函数，直接可以在()后面加上?.进行访问,即可解决兼容问题。

const getOpenData = window.openData?.();

函数形式的代码中有时候有组件形式的代码，调用需要加上this.
当埋点的时候遇到从别的地方引入的函数，像learning项目里面的handleClickConsult，则可以传递一个变量，
```
onClick={() => handleClickConsult("offSiteCustomer")}
```
进行判断是哪个地方传过来的，之后再加上不同的埋点信息。
Modal组件的visible属性现在快不支持使用了，可以使用open代替。

export const handleClickConsult = (name) => {

// @ts-ignore

// window.showConsultModal && window.showConsultModal();

// 钉钉预约演示跳转钉钉客服

const trackerData = {

offSiteCustomer: {

actionName: "点击在线客服",

actionGroup: "在线客服",

productName: "学习中心",

},

footer: {

actionName: "点击底部在线咨询",

actionGroup: "在线咨询",

productName: "学习中心",

},

rightFloating: {

actionName: "点击右侧在线咨询",

actionGroup: "在线咨询",

productName: "学习中心",

},


};

//判断name是否在trackerData里面，在的话就使用 ...trackerData[name]里面的

if (trackerData[name]) {

trackerAction({

...trackerData[name],

actionName: name,

actionGroup: "预约演示",

productName: "OKR学习",

});

}

};

防抖函数debounce对于高频率点击的函数，要让函数等待一定的时间才完成运行。以此来防止函数多次执行，造成内存泄漏。让debounce函数（）内的代码运行完成后，再等待指定的时间之后，才能完成handleSee函数的执行。当在debounce函数（）内的运行的过程中或者等待指定的时间期间内，再次调用了debounce函数，则让（）里面的代码重新运行之后再等待指定的时间，直到没有其他调用打断函数的执行。

const handleSee = debounce(async (data) => {
try {
setIsPlayerVideo(true);
const res = await seeLearning(data.learningId);
if (res && res.Code === 1) {
setIsRead(true);
setShowNoticePop(false);
}
} catch (error) {
Toast.Error('error', { canClose: false });
}
}, 500);