diff --git a/README.md b/README.md
index 4dff81bb..d12ade7e 100644
--- a/README.md
+++ b/README.md
@@ -28,14 +28,13 @@ import Button from '@uiw/react-button';
import CodePreview from '@uiw/react-code-preview';
const code = `import Button from '@uiw/react-button';
-import ReactDOMClient from 'react-dom/client';
+import ReactDOM from 'react-dom/client';
-ReactDOM.render(
+ReactDOM.createRoot(_mount_).render(
,
- _mount_
);`;
export default function App() {
diff --git a/package.json b/package.json
index ff310deb..145427ba 100644
--- a/package.json
+++ b/package.json
@@ -102,4 +102,4 @@
"last 1 safari version"
]
}
-}
+}
\ No newline at end of file
diff --git a/src/index.less b/src/index.less
index e7599b84..4d8ebca0 100644
--- a/src/index.less
+++ b/src/index.less
@@ -30,7 +30,7 @@
border-radius: 3px;
margin-bottom: 16px;
background-color: var(--color-code-preview-bg) !important;
- color: transparent !important;
+ // color: transparent !important;
max-height: 420px;
min-height: 12px;
z-index: 10;
diff --git a/src/useCodePreview.ts b/src/useCodePreview.ts
index d54cbc44..06c900cc 100644
--- a/src/useCodePreview.ts
+++ b/src/useCodePreview.ts
@@ -1,10 +1,19 @@
import React, { useEffect, useRef } from 'react';
-// @ts-ignore
-import ReactDOMClient from 'react-dom/client';
-import ReactDOM from 'react-dom';
import { useState } from 'react';
import { babelTransform } from './transform';
import { CodePreviewProps } from './';
+import ReactDOM from 'react-dom';
+
+export const getReactDOMClient = () => {
+ let _ReactDOM;
+ try {
+ // 使用 require 解决 react v17 ts 报错问题
+ _ReactDOM = require('react-dom/client');
+ } catch (err) {
+ // console.warn(`如果使用的是react-dom小于v18的版本,可以忽略此警告:${err}`)
+ }
+ return _ReactDOM;
+};
export function useCodePreview(props: CodePreviewProps) {
const [demoDom, setDemoDom] = useState();
@@ -16,6 +25,10 @@ export function useCodePreview(props: CodePreviewProps) {
const [copied, setCopied] = useState(false);
const [code, setCode] = useState(props.code || '');
+ const ReactDOMClient = React.useMemo(() => {
+ return window.ReactDOM ? window.ReactDOM : getReactDOMClient();
+ }, []);
+
/** 通过缓存的方式 解决 react v18 中 的报错 ***/
// @ts-ignore
const cachesRef = React.useRef(new Map([]));
@@ -51,9 +64,9 @@ export function useCodePreview(props: CodePreviewProps) {
ReactDOMClient: _ReactDOMClient,
...otherDeps
} = props.dependencies || {};
- const V18ReactDOM = _ReactDOMClient || ReactDOMClient || _ReactDOM || ReactDOM;
+ let V18ReactDOM = _ReactDOMClient || ReactDOMClient || _ReactDOM || ReactDOM;
// 判断是否是 react v18版本
- const isV18 = Reflect.has(V18ReactDOM || {}, 'createRoot');
+ const isV18 = Reflect.has(V18ReactDOM, 'createRoot');
const NewReactDOM = isV18 ? ReactDOMRender(V18ReactDOM) : V18ReactDOM;
try {
@@ -75,7 +88,7 @@ export function useCodePreview(props: CodePreviewProps) {
// react < v18 中写法替换
str = str.replace('ReactDOM.render', `ReactDOM.createRoot("${playerId.current}").render`);
// react v18 中写法替换
- str = str.replace(`ReactDOMClient.createRoot(_mount_)`, `ReactDOM.createRoot("${playerId.current}")`);
+ str = str.replace(`ReactDOM.createRoot(_mount_)`, `ReactDOM.createRoot("${playerId.current}")`);
str = str.replace('_mount_', ``);
} else {
str = str.replace('_mount_', `document.getElementById('${playerId.current}')`);
diff --git a/website/Example.tsx b/website/Example.tsx
index 1a0c2e6c..b9328a05 100644
--- a/website/Example.tsx
+++ b/website/Example.tsx
@@ -5,9 +5,9 @@ import * as UIW from 'uiw';
const defaultCode = `
import { Button, Divider, Icon } from 'uiw';
-import ReactDOMClient from 'react-dom/client';
+import ReactDOM from 'react-dom/client';
-ReactDOM.render(
+ReactDOM.createRoot(_mount_).render(
@@ -16,7 +16,6 @@ ReactDOM.render(
,
- _mount_
);`;
const Example = () => {
@@ -81,7 +80,7 @@ const Example = () => {
html: '',
js: code.replace('_mount_', 'document.getElementById("root")'),
css_external: 'https://unpkg.com/uiw@3.2.6/dist/uiw.min.css',
- js_external: `https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/uiw@4.7.2/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.0.12/index.js`,
+ js_external: `https://unpkg.com/react@18.x/umd/react.development.js;https://unpkg.com/react-dom@18.x/umd/react-dom.development.js;https://unpkg.com/uiw@4.7.2/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.0.12/index.js`,
},
});
function handleChange(keyName: string, e: React.ChangeEvent) {