From e5c60c89b4b3b9045b6c26349e933e81cb77fa36 Mon Sep 17 00:00:00 2001
From: ChenXiao <2459402883@qq.com>
Date: Wed, 21 Dec 2022 14:16:41 +0800
Subject: [PATCH] fix(grid): justify and align properties are not reactive for
 Row (#39704)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 陈小祥 <xiaoxiang930601@163.com>
---
 components/grid/__tests__/index.test.tsx | 27 ++++++++++++++++++++++--
 components/grid/row.tsx                  |  3 +++
 2 files changed, 28 insertions(+), 2 deletions(-)

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(<Row justify={{ lg: 'center' }} />);
     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<any>('start');
+      return (
+        <>
+          <Row justify={justify} align="bottom">
+            <div>button1</div>
+            <div>button</div>
+          </Row>
+          <span onClick={() => setjustify('end')} />
+        </>
+      );
+    };
+    const { container } = render(<ReactiveTest />);
+    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;
     }