diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index bae40b381e..194ebb8d89 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -27,6 +27,14 @@ export default class AnchorLink extends React.Component { this.context.antAnchor.registerLink(this.props.href); } + componentWillReceiveProps(nextProps: AnchorLinkProps) { + const { href } = nextProps; + if (this.props.href !== href) { + this.context.antAnchor.unregisterLink(this.props.href); + this.context.antAnchor.registerLink(href); + } + } + componentWillUnmount() { this.context.antAnchor.unregisterLink(this.props.href); } diff --git a/components/anchor/__tests__/Anchor.test.js b/components/anchor/__tests__/Anchor.test.js index 23fd8ebeba..2fe66a76f0 100644 --- a/components/anchor/__tests__/Anchor.test.js +++ b/components/anchor/__tests__/Anchor.test.js @@ -90,4 +90,20 @@ describe('Anchor Render', () => { wrapper.setProps({ children: null }); expect(wrapper.instance().links).toEqual([]); }); + + it('should update links when link href update', async () => { + let anchorInstance = null; + function AnchorUpdate({ href }) { + return ( + anchorInstance = c}> + + + ); + } + const wrapper = mount(); + + expect(anchorInstance.links).toEqual(['#API']); + wrapper.setProps({ href: '#API_1' }); + expect(anchorInstance.links).toEqual(['#API_1']); + }); });