diff --git a/docs/examples/getScrollBarSize.tsx b/docs/examples/getScrollBarSize.tsx index 5e34da58..7b61f6b5 100644 --- a/docs/examples/getScrollBarSize.tsx +++ b/docs/examples/getScrollBarSize.tsx @@ -22,9 +22,9 @@ const cssText = ` `; export default () => { - const defaultRef = React.useRef(); - const webkitRef = React.useRef(); - const scrollRef = React.useRef(); + const defaultRef = React.useRef(null); + const webkitRef = React.useRef(null); + const scrollRef = React.useRef(null); const [sizeData, setSizeData] = React.useState(''); React.useEffect(() => { diff --git a/docs/examples/portal.tsx b/docs/examples/portal.tsx index a23ed374..f35e550a 100644 --- a/docs/examples/portal.tsx +++ b/docs/examples/portal.tsx @@ -2,13 +2,13 @@ import React from 'react'; import PortalWrapper from 'rc-util/es/PortalWrapper'; export default () => { - const divRef = React.useRef(); - const outerRef = React.useRef(); + const divRef = React.useRef(null); + const outerRef = React.useRef(null); React.useEffect(() => { console.log('>>>', divRef.current); }, []); - + function getRef() { return outerRef.current; } diff --git a/package.json b/package.json index f0c633ee..834e704b 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "is-mobile": "^5.0.0", - "react-is": "^18.2.0" + "react-is": "^19.2.0" }, "devDependencies": { "@rc-component/father-plugin": "^2.0.1", @@ -47,9 +47,9 @@ "@testing-library/react": "^16.0.0", "@types/jest": "^30.0.0", "@types/node": "^24.6.1", - "@types/react": "^18.0.0", - "@types/react-dom": "^18.0.0", - "@types/react-is": "^19.0.0", + "@types/react": "^19.2.0", + "@types/react-dom": "^19.2.0", + "@types/react-is": "^19.2.0", "@types/responselike": "^1.0.0", "@types/warning": "^3.0.0", "@umijs/fabric": "^3.0.0", @@ -64,10 +64,8 @@ "lint-staged": "^15.1.0", "prettier": "^3.3.2", "rc-test": "^7.0.14", - "react": "^18.0.0", - "react-19": "npm:react@19.0.0", - "react-dom": "^18.0.0", - "react-dom-19": "npm:react-dom@19.0.0", + "react": "^19.2.0", + "react-dom": "^19.2.0", "typescript": "^5.3.2" }, "peerDependencies": { diff --git a/src/Portal.tsx b/src/Portal.tsx index 4a79b0e3..64857223 100644 --- a/src/Portal.tsx +++ b/src/Portal.tsx @@ -14,8 +14,8 @@ export interface PortalProps { const Portal = forwardRef((props, ref) => { const { didUpdate, getContainer, children } = props; - const parentRef = useRef(); - const containerRef = useRef(); + const parentRef = useRef(null); + const containerRef = useRef(null); // Ref return nothing, only for wrapper check exist useImperativeHandle(ref, () => ({})); diff --git a/src/hooks/useEvent.ts b/src/hooks/useEvent.ts index f9bb7dce..b7accdab 100644 --- a/src/hooks/useEvent.ts +++ b/src/hooks/useEvent.ts @@ -3,7 +3,8 @@ import * as React from 'react'; function useEvent(callback: T): T { - const fnRef = React.useRef(); + const fnRef = React.useRef(null); + fnRef.current = callback; const memoFn = React.useCallback( diff --git a/tests/hooks-17.test.tsx b/tests/hooks-17.test.tsx deleted file mode 100644 index 1c84e57e..00000000 --- a/tests/hooks-17.test.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { render } from '@testing-library/react'; -import * as React from 'react'; -import { renderToString } from 'react-dom/server'; -import useId, { resetUuid } from '../src/hooks/useId'; - -jest.mock('react', () => { - const react = jest.requireActual('react'); - - const clone = { ...react }; - - Object.defineProperty(clone, 'useId', { - get: () => null, - }); - - return clone; -}); - -describe('hooks-17', () => { - describe('useId', () => { - const Demo: React.FC<{ id?: string }> = ({ id }) => { - const mergedId = useId(id); - return
; - }; - - function matchId(container: HTMLElement, id: string) { - const ele = container.querySelector('.target'); - return expect(ele.id).toEqual(id); - } - - it('fallback of React 17 or lower', () => { - const errorSpy = jest.spyOn(console, 'error'); - const originEnv = process.env.NODE_ENV; - process.env.NODE_ENV = 'development'; - - // SSR - const content = renderToString( - - - , - ); - expect(content).toContain('ssr-id'); - - // Hydrate - resetUuid(); - const holder = document.createElement('div'); - holder.innerHTML = content; - const { container } = render( - - - , - { hydrate: true, container: holder }, - ); - - matchId(container, 'rc_unique_1'); - - errorSpy.mockRestore(); - process.env.NODE_ENV = originEnv; - }); - }); -}); diff --git a/tests/ref-19.test.tsx b/tests/ref-19.test.tsx index 775fb317..95f18b6e 100644 --- a/tests/ref-19.test.tsx +++ b/tests/ref-19.test.tsx @@ -3,26 +3,6 @@ import React from 'react'; import { getNodeRef, useComposeRef, supportRef } from '../src/ref'; import { render } from '@testing-library/react'; -jest.mock('react', () => { - const react19 = jest.requireActual('react-19'); - return react19; -}); - -jest.mock('react-dom', () => { - const reactDom19 = jest.requireActual('react-dom-19'); - return reactDom19; -}); - -jest.mock('react-dom/client', () => { - const reactDom19Client = jest.requireActual('react-dom-19/client'); - return reactDom19Client; -}); - -jest.mock('react-dom/test-utils', () => { - const reactDom19Test = jest.requireActual('react-dom-19/test-utils'); - return reactDom19Test; -}); - describe('ref: React 19', () => { const errSpy = jest.spyOn(console, 'error'); @@ -59,7 +39,7 @@ describe('ref: React 19', () => { return ( <> - {React.cloneElement(children, { ref: mergedRef })} + {React.cloneElement(children, { ref: mergedRef })}
{childClassName}
); diff --git a/tests/ref.test.tsx b/tests/ref.test.tsx index 8f7334ac..0d12266d 100644 --- a/tests/ref.test.tsx +++ b/tests/ref.test.tsx @@ -56,8 +56,9 @@ describe('ref', () => { const Demo = () => { const [, forceUpdate] = React.useState({}); - const ref1 = React.useRef(); - const ref2 = React.useRef(); + const ref1 = React.useRef(null); + const ref2 = React.useRef(null); + const refFn = useEvent(() => { count += 1; }); @@ -102,7 +103,6 @@ describe('ref', () => { , ); expect(supportRef(FC)).toBeFalsy(); - // expect(supportRef(holderRef.current.props.children)).toBeFalsy(); }); it('arrow function component', () => { @@ -116,7 +116,7 @@ describe('ref', () => { , ); expect(supportRef(FC)).toBeFalsy(); - expect(supportRef(holderRef.current.props.children)).toBeFalsy(); + expect(supportRef(holderRef.current.props.children)).toBeTruthy(); // React19 ref 收拢到了 props 里面，默认支持 }); it('forwardRef function component', () => { @@ -162,7 +162,7 @@ describe('ref', () => { , ); expect(supportRef(MemoFC)).toBeFalsy(); - expect(supportRef(holderRef.current.props.children)).toBeFalsy(); + expect(supportRef(holderRef.current.props.children)).toBeTruthy(); // React19 ref 收拢到了 props 里面，默认支持 }); it('memo of forwardRef function component', () => { @@ -195,7 +195,7 @@ describe('ref', () => { it('FC', () => { const FC = () =>
; const RefFC = React.forwardRef(FC); - expect(supportNodeRef()).toBeFalsy(); + expect(supportNodeRef()).toBeTruthy(); // React19 ref 收拢到了 props 里面，默认支持 expect(supportNodeRef()).toBeTruthy(); }); diff --git a/tests/toArray-19.test.tsx b/tests/toArray-19.test.tsx index 2d9f7a06..6ea9c361 100644 --- a/tests/toArray-19.test.tsx +++ b/tests/toArray-19.test.tsx @@ -2,29 +2,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import toArray from '../src/Children/toArray'; -jest.mock('react', () => { - const react19 = jest.requireActual('react-19'); - return react19; -}); - -jest.mock('react-dom', () => { - const reactDom19 = jest.requireActual('react-dom-19'); - return reactDom19; -}); - -jest.mock('react-dom/client', () => { - const reactDom19Client = jest.requireActual('react-dom-19/client'); - return reactDom19Client; -}); - -jest.mock('react-dom/test-utils', () => { - const reactDom19Test = jest.requireActual('react-dom-19/test-utils'); - return reactDom19Test; -}); - -class UL extends React.Component<{ - children?: React.ReactNode; -}> { +class UL extends React.Component> { render() { return
    {this.props.children}
; }