demo: update demo type { children: React.ReactNode } => React.PropsWithChildren (#48771)

* demo: update demo type React.ReactNode => React.PropsWithChildren

* fix: fix

components/button/__tests__/index.test.tsx

@@ -88,7 +88,7 @@ describe('Button', () => {
   });
 
   it('renders Chinese characters correctly in HOC', () => {
-    const Text = ({ children }: { children: React.ReactNode }) => <span>{children}</span>;
+    const Text: React.FC<React.PropsWithChildren> = ({ children }) => <span>{children}</span>;
     const { container, rerender } = render(
       <Button>
         <Text>按钮</Text>

components/form/demo/form-item-path.tsx

@@ -6,14 +6,16 @@ const MyFormItemContext = React.createContext<(string | number)[]>([]);
 
 interface MyFormItemGroupProps {
   prefix: string | number | (string | number)[];
-  children: React.ReactNode;
 }
 
 function toArr(str: string | number | (string | number)[]): (string | number)[] {
   return Array.isArray(str) ? str : [str];
 }
 
-const MyFormItemGroup = ({ prefix, children }: MyFormItemGroupProps) => {
+const MyFormItemGroup: React.FC<React.PropsWithChildren<MyFormItemGroupProps>> = ({
+  prefix,
+  children,
+}) => {
   const prefixPath = React.useContext(MyFormItemContext);
   const concatPath = React.useMemo(() => [...prefixPath, ...toArr(prefix)], [prefixPath, prefix]);
 

components/grid/demo/flex-align.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Col, Divider, Row } from 'antd';
 
-const DemoBox: React.FC<{ children: React.ReactNode; value: number }> = (props) => (
+const DemoBox: React.FC<React.PropsWithChildren<{ value: number }>> = (props) => (
   <p className={`height-${props.value}`}>{props.children}</p>
 );
 

components/table/demo/edit-cell.tsx

@@ -31,13 +31,12 @@ const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
 interface EditableCellProps {
   title: React.ReactNode;
   editable: boolean;
-  children: React.ReactNode;
   dataIndex: keyof Item;
   record: Item;
   handleSave: (record: Item) => void;
 }
 
-const EditableCell: React.FC<EditableCellProps> = ({
+const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
   title,
   editable,
   children,

components/table/demo/edit-row.tsx

@@ -25,10 +25,9 @@ interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   inputType: 'number' | 'text';
   record: Item;
   index: number;
-  children: React.ReactNode;
 }
 
-const EditableCell: React.FC<EditableCellProps> = ({
+const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
   editing,
   dataIndex,
   title,

components/tooltip/demo/disabled-children.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Checkbox, Input, InputNumber, Select, Space, Tooltip } from 'antd';
 
-const WrapperTooltip: React.FC<{ children?: React.ReactNode }> = (props) => (
+const WrapperTooltip: React.FC<React.PropsWithChildren> = (props) => (
   <Tooltip title="Thanks for using antd. Have a nice day!" {...props} />
 );
 

docs/blog/config-provider-style.en-US.md

@@ -80,7 +80,7 @@ const useButtonStyle = () => {
   }))();
 };
 
-function GeekProvider(props: { children?: React.ReactNode }) {
+function GeekProvider(props: React.PropsWithChildren) {
   const { styles } = useButtonStyle();
 
   return <ConfigProvider button={{ className: styles.btn }}>{props.children}</ConfigProvider>;
@@ -92,7 +92,7 @@ function GeekProvider(props: { children?: React.ReactNode }) {
 It's also easy to extend for scenarios that need to inherit `className`:
 
 ```tsx
-function GeekProvider(props: { children?: React.ReactNode }) {
+function GeekProvider(props: React.PropsWithChildren) {
   const { button } = React.useContext(ConfigProvider.ConfigContext);
   const { styles } = useButtonStyle();
 

tests/__mocks__/rc-util/lib/Portal.tsx

@@ -5,11 +5,7 @@ import { TriggerMockContext } from '../../../shared/demoTestContext';
 let OriginPortal = jest.requireActual('rc-util/lib/Portal');
 OriginPortal = OriginPortal.default ?? OriginPortal;
 
-interface MockPortalProps {
-  children?: React.ReactNode
-}
-
-class MockPortal extends React.Component<MockPortalProps> {
+class MockPortal extends React.Component<React.PropsWithChildren> {
   container: boolean | undefined;
 
   static contextType = TriggerMockContext;
@@ -32,7 +28,7 @@ class MockPortal extends React.Component<MockPortalProps> {
   }
 }
 
-const CustomPortal = React.forwardRef<PortalRef, PortalProps | MockPortalProps>((props, ref) => {
+const CustomPortal = React.forwardRef<PortalRef, PortalProps | React.PropsWithChildren>((props, ref) => {
   const context = React.useContext(TriggerMockContext);
   if (context?.mock === false) {
     return <OriginPortal {...props} ref={ref} />;