feat(use): 支持在React环境中使用

script/generate-entry.js

@@ -10,7 +10,7 @@ const componentsPath = path.resolve(__dirname, '../src');
 const components = fs.readdirSync(componentsPath).filter((name) => {
   if (['style', 'icon'].includes(name) || name.startsWith('_')) return false;
   const componentPath = path.resolve(componentsPath, name);
-  if (fs.statSync(componentPath).isDirectory()) {
+  if (fs.statSync(componentPath).isDirectory() || /src\/react\.ts|src\/vue\.ts/.test(componentPath)) {
     return true;
   }
   return false;

site/docs/getting-started.md

@@ -63,6 +63,32 @@ export default defineConfig({
 }
 ```
 
+### 在React中使用
+
+首先引入`renderReact`
+
+```javascript
+import { renderReact } from 'tdesign-web-components';
+```
+
+在React项目中使用
+
+```javascript
+const App: React.FC = () => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    if (ref.current) {
+      renderReact(<t-button>BUTTON</t-button>, ref.current)
+    }
+  }, [])
+
+
+  return (
+    <div ref={ref}></div>
+  )
+}
+```
+
 ### 更改主题
 
 由于原始样式基于 less 编写，需要自行处理 less 文件的编译（例如安装 less、less-loader）

src/index.ts

@@ -28,6 +28,7 @@ export * from './popup';
 export * from './progress';
 export * from './radio';
 export * from './range-input';
+export * from './react.ts';
 export * from './select';
 export * from './select-input';
 export * from './skeleton';

src/menu/MenuItem.tsx

@@ -1,4 +1,4 @@
-import 'tdesign-web-components/tooltip';
+import '../tooltip';
 
 import { bind, Component, tag } from 'omi';
 

src/message/const.tsx

@@ -1,5 +1,4 @@
-import { getClassPrefix } from 'tdesign-web-components/_util/classname';
-
+import { getClassPrefix } from '../_util/classname';
 import { MessagePlacementList, MessageThemeList } from './type';
 
 const Distance = '32px';

src/message/message.tsx

@@ -1,7 +1,7 @@
 import { Component, render, tag } from 'omi';
-import { convertToLightDomNode } from 'tdesign-web-components/_util/lightDom';
 
 import classname from '../_util/classname';
+import { convertToLightDomNode } from '../_util/lightDom';
 import { AttachNodeReturnValue, Styles, TNode } from '../common';
 import { getMessageConfig, globalConfig, setGlobalConfig } from './config';
 import { PlacementOffset, tdMessageListClass, tdMessagePlacementClassGenerator } from './const';

src/message/messageClose.tsx

@@ -5,9 +5,9 @@
 import 'tdesign-icons-web-components/esm/components/close';
 
 import Omi, { classNames, Component, tag } from 'omi';
-import { StyledProps } from 'tdesign-web-components';
-import { parseContentTNode } from 'tdesign-web-components/_util/parseTNode';
 
+import { parseContentTNode } from '../_util/parseTNode';
+import { StyledProps } from '../common';
 import { tdMessageClassGenerator } from './const';
 import { TdMessageProps } from './type';
 

src/message/messageComponent.tsx

@@ -2,10 +2,10 @@ import './messageClose';
 
 import classNames from 'classnames';
 import Omi, { Component, createRef, signal, tag } from 'omi';
-import MessageIcon from 'tdesign-web-components/message/messageIcon';
 
 import { StyledProps, TNode } from '../common';
 import { tdClassIsGenerator, tdMessageClassGenerator, tdMessagePrefix } from './const';
+import MessageIcon from './messageIcon';
 // 依赖组件引入
 import { TdMessageProps } from './type';
 

src/message/messageIcon.tsx

@@ -2,7 +2,7 @@ import 'tdesign-icons-web-components/esm/components/check-circle-filled';
 import 'tdesign-icons-web-components/esm/components/info-circle-filled';
 import 'tdesign-icons-web-components/esm/components/error-circle-filled';
 import 'tdesign-icons-web-components/esm/components/help-circle-filled';
-import 'tdesign-web-components/loading';
+import '../loading';
 
 import { classPrefix } from './const';
 import { TdMessageProps } from './type';

src/range-input/RangeInput.tsx

@@ -1,5 +1,5 @@
 import 'tdesign-icons-web-components';
-import 'tdesign-web-components/input';
+import '../input';
 import './RangeInputInner';
 
 import { bind, classNames, Component, signal, tag } from 'omi';

src/range-input/RangeInputInner.tsx

@@ -1,6 +1,7 @@
 import { tag } from 'omi';
-import { getClassPrefix } from 'tdesign-web-components/_util/classname';
-import { Input } from 'tdesign-web-components/input';
+
+import { getClassPrefix } from '../_util/classname';
+import { Input } from '../input';
 
 @tag('t-range-input-inner')
 export default class RangeInput extends Input {

src/range-input/type.ts

@@ -1,6 +1,5 @@
-import { InputFormatType, InputValue } from 'tdesign-web-components/input';
-
 import { TNode } from '../common';
+import { InputFormatType, InputValue } from '../input';
 
 export interface TdRangeInputProps {
   /**

src/react.ts

@@ -0,0 +1,56 @@
+/**
+ * 在React环境中使用的兼容方法
+ */
+
+import { render } from 'omi';
+
+const convertReactToOmi = (r: any): Omi.ComponentChild => {
+  if (!r) return r;
+  if (typeof r === 'string') return r;
+  const {
+    type,
+    key,
+    ref,
+    props: { children, ...rest },
+  } = r;
+  const omiVNode = {
+    nodeName: type,
+    attributes: { ignoreAttrs: true, ref, ...rest },
+    key,
+    children: [],
+  };
+
+  if (!children) {
+    return omiVNode;
+  }
+
+  if (Array.isArray(children)) {
+    return {
+      ...omiVNode,
+      children: children.map((c: any) => convertReactToOmi(c)),
+    };
+  }
+
+  if (typeof children === 'object') {
+    return {
+      ...omiVNode,
+      children: [children].map((c: any) => convertReactToOmi(c)),
+    };
+  }
+
+  return {
+    ...omiVNode,
+    children,
+  };
+};
+
+/**
+ * 在react环境中渲染组件
+ * @param reactVNode react的vnode结构
+ * @param root 需要挂载的html
+ */
+const renderReact = <T = any>(reactVNode: T, root: HTMLElement) => {
+  render(convertReactToOmi(reactVNode), root);
+};
+
+export { renderReact, convertReactToOmi };