mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 11:39:28 +08:00
* fix: Space children remount. close #26177 * update snapshots
This commit is contained in:
parent
5537ab66e0
commit
6d02b51ae1
@ -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"
|
||||
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
@ -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]:
|
||||
|
Loading…
Reference in New Issue
Block a user