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;
}