diff --git a/components/space/__tests__/index.test.tsx b/components/space/__tests__/index.test.tsx index 8931647187..22593a7201 100644 --- a/components/space/__tests__/index.test.tsx +++ b/components/space/__tests__/index.test.tsx @@ -210,4 +210,16 @@ describe('Space', () => { expect(item).toBeEmptyDOMElement(); expect(getComputedStyle(item).display).toBe('none'); }); + + it('should ref work', () => { + const ref = React.createRef(); + const { container } = render( + + Text1 + Text2 + , + ); + + expect(ref.current).toBe(container.firstChild); + }); }); diff --git a/components/space/index.tsx b/components/space/index.tsx index 49d34ed761..d63551f64c 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames'; import toArray from 'rc-util/lib/Children/toArray'; import * as React from 'react'; +import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'; import { ConfigContext } from '../config-provider'; import type { SizeType } from '../config-provider/SizeContext'; -import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'; import Compact from './Compact'; import Item from './Item'; @@ -41,7 +41,7 @@ function getNumberSize(size: SpaceSize) { return typeof size === 'string' ? spaceSize[size] : size || 0; } -const Space: React.FC = (props) => { +const Space = React.forwardRef((props, ref) => { const { getPrefixCls, space, direction: directionConfig } = React.useContext(ConfigContext); const { @@ -142,6 +142,7 @@ const Space: React.FC = (props) => { return wrapSSR(
= (props) => { {nodes}
, ); -}; +}); if (process.env.NODE_ENV !== 'production') { Space.displayName = 'Space'; } -type CompoundedComponent = React.FC & { +type CompoundedComponent = React.ForwardRefExoticComponent< + SpaceProps & React.RefAttributes +> & { Compact: typeof Compact; };