解决Antd-Affix组件位置、宽度不随容器变化的问题

821 阅读1分钟

简而言之,在发生变化的时候调用 Affix的 updatePosition 方法

<Affix ref={this.affixRef} offsetBottom={0}>
    <Row className={selfStyle.affixedBottomBar}>{content}</Row>
</Affix>

当高度发生变化时,需要滚动一下能看到Affix 的解决办法

  public componentDidUpdate() {
    this.affixRef.current.updatePosition();
  }

对于宽度变化,比如侧边栏的收起与展开,Affix组件宽度不更新时,可以通过@connect 注入

@connect(({ framework: { siderVisible } }: ApplicationState) => ({
  siderVisible,
}))

会触发componentWillReceiveProps 然后触发componentDidUpdate,大致代码如下

...
@connect(({ framework: { siderVisible } }: ApplicationState) => ({
  siderVisible,
}))
...
private affixRef = React.createRef<Affix>();

public componentDidUpdate() {
  this.affixRef.current.updatePosition();
}
...
<Affix ref={this.affixRef} offsetBottom={0}>
  <Row className={selfStyle.affixedBottomBar}>{content}</Row>
</Affix>
...