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

简而言之，在发生变化的时候调用 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>
...

关注我，不断更新实用的开发技巧，提高工作效率