踩坑完全指南（长期更新）

2024年5月27日 186次阅读来源: Marckon

有很多坑踩过的，记录下来。尤其是css，相信前端er们最讨厌写的就是css

环境配置篇

一篇文章了解Mac上Node环境配置

样式篇

如何设置表格的单元格内容高度

回答链接🔗

必须要给单元格加一个高度，当然这个高度的值本身并不会生效 <td style="height: 1px"/>

`Antd`表格列宽度使用百分比

目前，antd@3.x 版本的Table列宽度只支持string或number设置，而大部分情况，表格通常会布满某一个弹性容器，这使得我们不知道表格的真实宽度。并且由于不能对Column使用ref或style，在这种情况下如果想按照比例设置列宽度就颇为头疼。我找到了一个比较hack的方法: 使用render渲染列内容，然后通过子元素的ref找到父节点（td），再指定父节点的宽度.

<Column
  render={data => (
    <div
      ref={(ref) => {
      // parentNode 是 td
      // word-break 针对超长文本折行处理，否则宽度不生效
        ref.parentNode.style = `width: ${columnConfig.widthRatio}%; word-break: break-all`;
      }}
    >
      {data}
    </div>
  )}
/>

React篇

传入组件的数据变了，但是组件没有重新渲染