React挖呀挖

上次我做了一个简易的公式编辑器，demo结束，大家反应不错，准备正式用在项目里了，这篇文章将给一个完整的公式编辑器自定义滚动条的样式。

如何做一个智能的输入框，让用户更方便地输入公式？还可以预定义一些常量，在输入时可以自动弹出补全提示。

如何做一个React侧边栏，宽度/高度可以通过拖拽来调节，大屏时，栏位是分栏的，中间的边界线用来调节分栏比例。而小屏时，侧边栏会覆盖在主内容之上。

好多文章讲如何发布npm是写一个极其简单的片段，设置好npmrc就能发布，而真实场景中，我们往往要做一个能被他人引用的库。到底该怎样配置这个项目呢，这里将介绍如何在monorepo中发布一个组件库。

之前我介绍过如何做一个可拖拽列表，但当时没有任何动画，这篇文章将介绍如何加上丝滑的过度效果，用到react-dnd中的CustomDragLayer和DragPreview。

React有一种场景是，forwardRef传到子组件的outerRef需要绑定到子组件上，与此同时，子组件内部也有一个通过useRef创建的innerRef，也需要绑定到子组件上，该如何做呢？

给一个垂直排列的list组件，在变换顺序期间，如何加上过渡效果，我对比了市面上比较主流的工具库，最终选用react-flip-move，这篇文章将介绍我如何一步一步实现给list item添加动画的。

当做一个可以通过拖拽排列的list时，我是如何一步一步用react-dnd实现这个list的，包括如何设置draggable和droppable。类似的工具库有哪些优缺点？

最简单的答案是利用React.cloneElement。然而在实际工作中情况更复杂，尤其是在封装容器类组件时，会经常用到。下面我由浅入深，分三个级别，介绍如何应对此场景中越来越复杂的需求。

不等高的虚拟列表中，每一项中的文本是已知的，但长短不一，需要给出每一项的高度，那该如何计算呢？重点就是计算文本将会占据dom的高度，这里我用canvas，一步步带你算出来。