React 工作踩坑总结1

最新推荐文章于 2024-09-10 08:44:25 发布

大概是程序媛猿员吧

最新推荐文章于 2024-09-10 08:44:25 发布

阅读量612

点赞数 3

文章标签：前端 javascript 前端框架 html react.js

本文链接：https://blog.csdn.net/CD2N_Queen/article/details/127886685

版权

本文总结了React开发中遇到的一些问题，包括被遮挡层的事件点击处理、禁止文字选中、flex布局问题、服务端渲染理解及问题解决、next.js与antd中文配置、处理后端返回的文件流下载、react语音播放功能实现、Docker Desktop停止问题及Proxifier导致的网络问题。通过这些问题的解答，有助于开发者更好地理解和解决React项目中的实际问题。

摘要由CSDN通过智能技术生成

1、如何让被遮挡层可以进行事件点击（纯CSS方法）

项目中有一个图片挡住一列文本的点击事件，本来想的是把层级提高，但是提高层级后，页面往上滑后，字又会浮到图片上面，或者是写个函数去判断字体到底部的距离，然后根据距离去调整这个层级关系，但是这个有点麻烦

最后经过查阅资料，可以通过css直接调整：

外层（被遮挡的层）{
pointer-events: none;
}

内层（要发生事件的层）{
pointer-events: auto;
}

取值none：元素永远不会成为鼠标事件的target

取值auto：与pointer-events属性未指定时的表现效果相同（即将元素恢复成为鼠标事件的target）

2、css控制页面文字不能被选中 user-select:none;

现象：html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。

原因：鼠标点快了文字会被选中。

解决方案：不同的浏览器设置的内容不一样，user-select不是一个W3C的标准，浏览器的支持不完成，需要对不同的浏览器进行调整。


body{

-moz-user-select:none;/火狐/

-webkit-user-select:none;/webkit浏览器/

-ms-user-select:none;/IE10/

-khtml-user-select:none;/早期浏览器/

user-select:none;

}