2

我正在构建一个允许我调整其宽度的 ReactJS 网格组件。调整大小是通过单击grip组件的 div 并向左或向右拖动来完成的。我的代码：

class Cell extends Component {

  handleGrip = event => {
    if (this.props.onGrip) this.props.onGrip(event);
  };

  render() {
    let gripComponent = (
      <div
        onMouseDown={this.handleGrip}
        className="cell-grip"
      />
    );

    let width = this.props.width;

    return (
      <div
        className={"cell-container"}
        style={{ width: width }}
      >
        <div className="cell-content">{this.props.children}</div>
        {gripComponent}
      </div>
    );
  }
}

export default Cell;

SCSS类：

.cell-container {
    width: 100%;
    border: 1px solid $ux-theme-color-border;
    margin: 0 -1px 0 0;
    background-color: $ux-theme-color-white;
    display: flex;
    flex-direction: row;
}

.cell-content {
    flex-shrink: 1;
    width: 100%;
    padding: 5px;
    font-size: 12px;
}

.cell-grip {
    flex-shrink: 0;
    width: 5px;
    min-width: 5px;
    cursor: ew-resize;
    background-color: $ux-theme-color-border;
}

（这里没有展示完整的宽度计算和事件处理）

一切正常，除了一件事。组件在其内容右侧的gripflexbox 中呈现。当宽度变小时，grip不会渲染，因此我无法再选择它。如果单元格太小，这会导致我无法调整单元格的大小，因为没有grip显示可供选择。检查之前和之后的图像：

前：

前

调整大小后：

后

一旦单元格的grip宽度变得小于内容的宽度 ( cell-content) 就会消失（第一个弹性项目确实显示）。

我怎样才能防止这种情况发生并保证grip将显示在任何宽度上？

4

0 回答 0