通过 react-leaflet 在 react 中使用 leaflet,在动态修改 Popup 弹窗内容时,发现 Popup 尺寸(宽高)不会跟随修改后的内容变化。 问题 有一个默认小尺寸的 Popup,它里面有一个按钮。点击按钮后会将 Popup 中的内容替换成大尺寸内容。 简要逻辑如下: <Pop……
react-Leaflet中Popup尺寸不随内容变化大小问题
react-draft-wysiwyg点击工具栏按钮无效(如插入图片)
使用 react-draft-wysiwyg 搭配新版 React 开发,发现工具栏(Toolbar)的添加图片、添加表情、添加图像、文字下拉列表等点击无效。 现象 使用新版本 Create-React-App 创建的 React 工程,引入 react-draft-wysiwyg 作为文本编辑器。 页面运行……
在React中写一个回到顶部组件(back to top)
前文说过,最近在写一个基于 React + WP-Rest 的独立主题,而本文所说的回到顶部组件即是它的一部分。 原理及演示 关于Element.scrollTop,MDN 上有很好的解释: Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。 一个元素的 scrollTop……
React函数组件使用State和生命周期方法(componentDidMount等)
对于函数组件(Function Component)来说,它没有 class 组件中的 componentDidMount、componentDidUpdate 等生命周期方法,也没有 State,但这些可以通过 React Hook 实现。 React Hook 是什么 Hook 是一个特殊的参数,它是 R……
React 中使用 highlight.js 代码高亮的两种方法
最近在用 React + Material-UI 写一款基于 WP-Rest API 的主题,碰到了代码高亮的问题,这里记录下两种解决方法。 问题 请求 API 返回的数据包含代码块,前端应该调用代码高亮插件“渲染”一下。 在普通的 html 中,页面加载完成时调用 highlight.js 的高亮方法即可,……