Allotment组件preferredSize属性不随state变化问题求助

问题分析 #

你遇到的preferredSize不随this.state.toExpand变化的核心原因是：Allotment组件的preferredSize本质是初始偏好尺寸，当面板被拖拽或尺寸被动态调整后，该prop的变更不会直接覆盖当前实际尺寸；另外当preferredSize设为0时，面板处于隐藏状态，组件可能没有正确监听后续的prop更新。

解决方案 #

不要依赖preferredSize prop来控制面板的展开/收起，而是通过Allotment提供的updateSizes实例方法来动态调整面板尺寸，配合state维护展开状态：

1. 添加Allotment组件的Ref #

在类组件中创建ref来获取Allotment实例：

constructor(props) {
  super(props);
  this.state = {
    toExpand: false,
    consoleSize: 200 // 保存用户拖拽后的尺寸，可选
  };
  this.allotmentRef = React.createRef();
}

2. 编写展开/收起的触发方法 #

在toggleExpand中，先更新state，再调用updateSizes方法调整面板尺寸：

toggleExpand = () => {
  const newExpand = !this.state.toExpand;
  this.setState({ toExpand: newExpand }, () => {
    // 垂直布局下，第二个面板的尺寸：展开时用保存的尺寸或默认值，收起时设为0
    const targetSize = newExpand ? this.state.consoleSize : 0;
    this.allotmentRef.current.updateSizes([null, targetSize]);
  });
};

3. 监听尺寸变化（可选，保存用户拖拽的尺寸） #

如果需要记住用户拖拽后的面板高度，添加onSizesChange回调：

handleSizesChange = (sizes) => {
  // 只有面板展开时才保存尺寸
  if (this.state.toExpand) {
    this.setState({ consoleSize: sizes[1] });
  }
};

4. 调整Allotment组件的配置 #

绑定ref和尺寸变化回调，同时给控制台面板设置合理的minSize和maxSize：

<Allotment 
  vertical 
  ref={this.allotmentRef}
  onSizesChange={this.handleSizesChange}
>
  <Allotment.Pane>
    <Editor />
  </Allotment.Pane>
  <Allotment.Pane 
    preferredSize={0} 
    minSize={0} 
    maxSize={500}
  >
    <ConsoleHeader onClick={this.toggleExpand}>
      Console {this.state.toExpand ? <ArrowDown /> : <ArrowUp />}
    </ConsoleHeader>
    <ConsoleContent />
  </Allotment.Pane>
</Allotment>

为什么这样有效？ #

updateSizes是Allotment提供的官方方法，用于直接修改面板的当前尺寸，能确保state变更后面板尺寸同步更新；同时通过保存用户拖拽的尺寸，能让展开/收起行为更符合用户预期，和CodeSandbox的Console面板逻辑一致。

内容的提问来源于stack exchange，提问作者SoftTimur