fix: Space children remount. close #26177 (#26219)

* fix: Space children remount. close #26177

* update snapshots
This commit is contained in:
骗你是小猫咪 2020-08-15 16:29:47 +08:00 committed by GitHub
parent 5537ab66e0
commit 6d02b51ae1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 6 deletions

View File

@ -395,6 +395,12 @@ exports[`renders ./components/space/demo/debug.md correctly 1`] = `
</button>
</span>
</div>
<div
class="ant-space-item"
/>
<div
class="ant-space-item"
/>
<div
class="ant-space-item"
style="margin-right:8px"

View File

@ -1,5 +1,6 @@
import React from 'react';
import React, { useState } from 'react';
import { render, mount } from 'enzyme';
import { act } from 'react-test-renderer';
import Space from '..';
import ConfigProvider from '../../config-provider';
import mountTest from '../../../tests/shared/mountTest';
@ -79,4 +80,49 @@ describe('Space', () => {
expect(wrapper.find('.ant-space-item').length).toBe(3);
});
it('should be keep store', () => {
function Demo() {
const [state, setState] = React.useState(1);
return (
<div
id="demo"
onClick={() => {
setState(value => value + 1);
}}
>
{state}
</div>
);
}
function SpaceDemo() {
const [visible, setVisible] = useState(true);
function onChange() {
setVisible(!visible);
}
return (
<Space>
{visible && <div>space</div>}
<Demo />
<p onClick={onChange}>Three</p>
</Space>
);
}
const wrapper = mount(<SpaceDemo />);
expect(wrapper.find('#demo').text()).toBe('1');
act(() => {
wrapper.find('#demo').simulate('click');
});
expect(wrapper.find('#demo').text()).toBe('2');
act(() => {
wrapper.find('p').simulate('click');
});
expect(wrapper.find('#demo').text()).toBe('2');
});
});

View File

@ -1,6 +1,5 @@
import * as React from 'react';
import classNames from 'classnames';
import toArray from 'rc-util/lib/Children/toArray';
import { ConfigConsumerProps, ConfigContext } from '../config-provider';
import { SizeType } from '../config-provider/SizeContext';
@ -35,8 +34,7 @@ const Space: React.FC<SpaceProps> = props => {
...otherProps
} = props;
const items = toArray(children);
const len = items.length;
const len = React.Children.count(children);
if (len === 0) {
return null;
@ -60,13 +58,13 @@ const Space: React.FC<SpaceProps> = props => {
return (
<div className={cn} {...otherProps}>
{items.map((child, i) => (
{React.Children.map(children, (child, i) => (
<div
className={itemClassName}
// eslint-disable-next-line react/no-array-index-key
key={`${itemClassName}-${i}`}
style={
i === len - 1
i === len - 1 || child === null || child === undefined
? {}
: {
[direction === 'vertical' ? 'marginBottom' : marginDirection]: