以百分比或小数位返回元素的 offsetWidth 以使覆盖 div 的宽度相同 - React / Javascript

Question

最近我在 React 中摆弄了一下，我遇到了以下问题，这不一定与 React 相关，但通常与 Javascript / CSS 相关。

我创建了一个包含一定数量单元格的栏。这些单元格都具有相同的width 和height 属性，但会将其宽度/高度属性调整为viewport。

当我单击其中一个单元格时，div 会附加到单元格的容器中，此 div 是具有不同颜色的叠加层（因此您知道单击了哪个单元格）。

问题在于，条形及其包含的单元格的宽度属性设置为百分比，这样做是为了在将更多单元格添加到包含的 div 时，我可以根据单元格总数计算所需的宽度。

但是，overlay div 在单击单元格时添加，其宽度在px 中定义。这是因为覆盖 div 的 left 和 top 位置是使用 pageY 和 pageX 坐标确定的，并且单元格元素的 height 和 width 是使用 offsetHeight 和offsetWidth.

上面的结果是单元格的实际宽度是decimal value（它是百分比），但计算出的宽度是一个四舍五入的px值，结果如下：

正常单元格宽度：

Overlay div 宽度：

正如您所看到的，这是宽度上的微小差异，为了正确显示它，我必须放大很多。在第二张图片中，您看到在 left position 中添加覆盖 div 的距离越远，差异越大（这是合乎逻辑的）。

代码： 这是正在渲染的普通 Cell

_onRenderCell = (item, index) => {

this.myCell = React.createRef();

return (
  <div
    className="ms-ListGridExample-tile"
    data-is-focusable={false}
    style={{
      width: 100 / this._columnCount + '%',
      height: this._rowHeight * 1.5,
      float: 'left'
    }}
  >

  ... rest of the rendering omitted ...

您可以在此处看到宽度是根据列数确定并以百分比形式返回的：width: 100 / this._columnCount + '%'

添加叠加层div的onMouseDown事件：

_onMouseDown (e){

    const containerNode = this.rsvnRef.current;
    const cellNode = this.myCell.current;

    // Determine current position 
    let posY = e.pageY - containerNode.getBoundingClientRect().top;
    let posX = e.pageX - containerNode.getBoundingClientRect().left;

    // Determine width and height of cell
    let height = cellNode.offsetHeight;
    let width = cellNode.offsetWidth;

    // Determine top and left positions
    let top = posY - (posY % height);
    let left = posX - (posX % width);


    var reservationClasses = document.getElementsByClassName('reservation');

    var collisions = Array.prototype.filter.call(reservationClasses, function(rsv) {
        return rsv.offsetTop == top && rsv.offsetLeft == left;
    });

    if (collisions.length == 0){

        // Creating the overlay div
        const newRsvn = document.createElement("div");
        newRsvn.className = "reservation reservation-creating";
        newRsvn.style.top = top + 'px';
        newRsvn.style.left = left + 'px';
        newRsvn.style.height = height + 'px';
        newRsvn.style.width = width + 'px';

        // Apending overlay div to container
        containerNode.append(newRsvn);

    }

}

我的问题是（如您所料）；如何使覆盖的 div 具有与单元格 div 完全相同的宽度？您可以返回带小数位的offsetWidth，还是我可以以某种方式计算offsetWidth 的百分比？

Answer 1

经过更多研究，感谢这篇文章：Converting width from percentage to pixels 我设法完成了。

但是，我不知道这是否是最好/正确的解决方案，所以如果您认为有更好的方法，请提供反馈！

我决定在pixels 中设置单元格的width 而不是percentage。无论如何，单元格的渲染都是动态完成的（每次屏幕尺寸发生变化时），因此计算cell rendering 中的正确像素数量并将其四舍五入到整数工作正常，因为现在cell 和overlaying div使用相同的宽度。

代码：

_onRenderCell = (item, index) => {

    this.myCell = React.createRef();
    const containerNode = this.rsvnRef.current;

    let percents = parseInt(100 / this._columnCount);
    let parentWidth = parseInt(containerNode.offsetWidth);
    let pixels = parseInt(parentWidth*(percents/100));

    return (
      <div
        className="ms-ListGridExample-tile"
        data-is-focusable={false}
        style={{
          // width: 100 / this._columnCount + '%',
          width: pixels + 'px',
          height: this._rowHeight * 1.5,
          float: 'left'
        }}
      >

      ... rest of the rendering omitted ...