diff --git a/components/grid/__tests__/index.test.tsx b/components/grid/__tests__/index.test.tsx index 5f35715888cc..83ff8e7da3d5 100644 --- a/components/grid/__tests__/index.test.tsx +++ b/components/grid/__tests__/index.test.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { act } from 'react-dom/test-utils'; import { Col, Row } from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import useBreakpoint from '../hooks/useBreakpoint'; -import { render } from '../../../tests/utils'; +import { render, fireEvent } from '../../../tests/utils'; // Mock for `responsiveObserve` to test `unsubscribe` call jest.mock('../../_util/responsiveObserve', () => { @@ -209,4 +210,26 @@ describe('Grid', () => { const { container: container3 } = render(); expect(container3.innerHTML).not.toContain('ant-row-center'); }); + + // https://github.com/ant-design/ant-design/issues/39690 + it('Justify and align properties should reactive for Row', () => { + const ReactiveTest = () => { + const [justify, setjustify] = useState('start'); + return ( + <> + +
button1
+
button
+
+ setjustify('end')} /> + + ); + }; + const { container } = render(); + expect(container.innerHTML).toContain('ant-row-start'); + act(() => { + fireEvent.click(container.querySelector('span')!); + }); + expect(container.innerHTML).toContain('ant-row-end'); + }); }); diff --git a/components/grid/row.tsx b/components/grid/row.tsx index cf198f6a41f7..69eaf624282c 100644 --- a/components/grid/row.tsx +++ b/components/grid/row.tsx @@ -39,6 +39,9 @@ function useMergePropByScreen(oriProp: RowProps['align'] | RowProps['justify'], const [prop, setProp] = React.useState(typeof oriProp === 'string' ? oriProp : ''); const clacMergeAlignOrJustify = () => { + if (typeof oriProp === 'string') { + setProp(oriProp); + } if (typeof oriProp !== 'object') { return; }