fix: 使用时会报错找不到 React

因为打包时会把 jsx 内容用 React.createElement 包起来，用到的地方导入 React 完整包即可

Author: mengxinssfd

packages/components/src/draggable/Draggable.tsx

@@ -2,11 +2,10 @@
 import type { DraggableProps, DraggableFC } from './draggable.types';
 import { mergeReactDefaultProps, getClasses } from '@pkg/shared';
 // import { useLocale } from '~/config-provider/useLocale';
+import React, { createElement, forwardRef } from 'react';
 import { TransitionGroup } from '~/transition-group';
-import { createElement, forwardRef } from 'react';
 import { getClassNames } from '@tool-pack/basic';
 import { useDraggableChildren } from './hooks';
-import type { ReactElement } from 'react';
 
 export const cls = getClasses('draggable', ['ghost', 'item'], ['hidden']);
 const defaultProps = {
@@ -29,7 +28,7 @@ export const _Draggable = forwardRef<HTMLDivElement, DraggableProps>(
       const transitionProps = transition === true ? undefined : transition;
       return (
         <TransitionGroup {...transitionProps} className={className} tag={tag}>
-          {children as ReactElement[]}
+          {children as React.ReactElement[]}
         </TransitionGroup>
       );
     }

packages/components/src/draggable/DraggableGroup.tsx

@@ -1,5 +1,5 @@
-import { createContext, ReactElement, useRef, FC } from 'react';
 import type { DraggableGroupProps } from './draggable.types';
+import React, { createContext, useRef, FC } from 'react';
 import { mergeReactDefaultProps } from '@pkg/shared';
 
 const defaultProps = {
@@ -10,7 +10,7 @@ const defaultProps = {
  * 在 dragstart 里生产，在 dragenter 消费，在 drop ｜ dragend 销毁
  */
 export interface DraggableGroupContextProvider {
-  readonly children: ReactElement;
+  readonly children: React.ReactElement;
   cancel?: (id: symbol) => void;
   enter?: (id: symbol) => void;
   drop?: (id: symbol) => void;

packages/components/src/draggable/hooks/useDraggableChildren.ts

@@ -8,7 +8,7 @@ import {
   useForceUpdate,
 } from '@pkg/shared';
 import type { DOMAttributes, ReactElement, ReactNode, DragEvent } from 'react';
-import { cloneElement, useContext, Children, useRef } from 'react';
+import React, { cloneElement, useContext, useRef } from 'react';
 import { getClassNames, insertToArray } from '@tool-pack/basic';
 import type { DraggableProps } from '~/draggable';
 import { moveItem } from '../utils';
@@ -27,7 +27,7 @@ export function useDraggableChildren({
   const forceUpdate = useForceUpdate();
   const modifyChildrenRef = useFollowingRef(
     outerChildren,
-    (v) => Children.map(v, (i) => i) || [],
+    (v) => React.Children.map(v, (i) => i) || [],
   );
   const listRef = useFollowingRef(list, (v) => ({
     origin: v.slice(),

packages/components/src/loading/hooks/useLoading.tsx

@@ -1,7 +1,7 @@
 import type { LoadingProps } from '../loading.types';
 import { createRoot } from 'react-dom/client';
-import { useEffect, useState } from 'react';
 import { Loading } from '../Loading';
+import React from 'react';
 
 /**
  * 调用hook开启loading，无需挂靠render
@@ -15,9 +15,9 @@ export function useLoading(props: Partial<LoadingProps> = {}): {
 } {
   const { visible = true, ...rest } = props;
   // 可以通过外面传入的visible控制显隐
-  const [_visible, setVisible] = useState(false);
+  const [_visible, setVisible] = React.useState(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (_visible) {
       const r = createRoot(document.createElement('div'));
       r.render(
@@ -36,7 +36,7 @@ export function useLoading(props: Partial<LoadingProps> = {}): {
     }
   }, [_visible]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     setVisible(visible);
   }, [visible]);
 

packages/components/src/loading/showLoading.tsx

@@ -1,6 +1,7 @@
 import type { LoadingProps } from './loading.types';
 import { createRoot, Root } from 'react-dom';
 import { Loading } from './Loading';
+import React from 'react';
 
 let root: undefined | Root;
 
@@ -15,7 +16,7 @@ export function showLoading(
   if (root) root.unmount();
 
   const r = createRoot(document.createElement('div'));
-  r.render(
+  const l: React.ReactElement = (
     <Loading
       closeOnClick={true}
       visible={true}
@@ -24,7 +25,8 @@ export function showLoading(
         r.unmount();
         root = undefined;
       }}
-    />,
+    />
   );
+  r.render(l);
   root = r;
 }

packages/components/src/message/useMessage.tsx

@@ -1,5 +1,5 @@
 import type { MessagePushOptions, MessageQueueRef } from './message.types';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import type { PartialPart } from '@tool-pack/types';
 import { MessageQueue } from './MessageQueue';
 import { nextTick } from '@tool-pack/basic';

packages/components/src/picker/components/picker.Col.tsx

@@ -1,8 +1,8 @@
 import { debounceTime, fromEvent, timer, race, take, tap } from 'rxjs';
 import { OptionValueType, getClasses } from '@pkg/shared';
 import { getClassNames, emptyFn } from '@tool-pack/basic';
+import React, { useEffect, useRef } from 'react';
 import type { PickerOption } from '~/picker';
-import { useEffect, useRef } from 'react';
 import { Option } from '~/option';
 
 interface Props {

packages/components/src/transition-group/hooks/useChildMap.tsx

@@ -1,10 +1,3 @@
-import {
-  isValidElement,
-  cloneElement,
-  useEffect,
-  useState,
-  Children,
-} from 'react';
 import type {
   FunctionComponentElement,
   ReactElement,
@@ -16,6 +9,12 @@ import {
   transitionCBAdapter,
   Transition,
 } from '~/transition';
+import React, {
+  isValidElement,
+  cloneElement,
+  useEffect,
+  useState,
+} from 'react';
 import type { ChildMapValue, ChildMap } from '../transition-group.types';
 import { useIsInitDep, forwardRefs } from '@pkg/shared';
 
@@ -60,7 +59,7 @@ function createMap(
   const map: ChildMap = new Map();
 
   // 如果没有手动添加key, Children.map会自动添加key，就算手动添加也会被 map 处理一遍，跟原来的不一样
-  Children.map(children, (c) => c)?.forEach((child) => {
+  React.Children.map(children, (c) => c)?.forEach((child) => {
     if (!isValidElement(child)) return;
     const key = child.key || '';
     if (!key) return;
@@ -78,7 +77,7 @@ function mergeChildMap(
 ): ChildMap {
   const childMap: ChildMap = new Map();
   const map = new Map<Key, ReactElement>();
-  Children.map(children, (c) => c)?.forEach(
+  React.Children.map(children, (c) => c)?.forEach(
     (c) => isValidElement(c) && c.key && map.set(c.key, c),
   );
   let insertKeys: Key[] = [];