Fixed antD-AFFix component position, width does not vary with container

In short, Affix’s updatePosition method is called when a change occurs

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

When the height changes, you need to scroll to see Affix’s solution

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

For width changes, such as the collapse and expansion of the sidebar, if the Affix component width is not updated, it can be injected via @Connect

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

Trigger componentWillReceiveProps then trigger componentDidUpdate, roughly as follows

. @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> ...Copy the code