From b3a48749cd81bd82b2acfbb7ff821f7e67c8f843 Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Thu, 21 Apr 2022 18:54:04 +0800 Subject: [PATCH 01/11] =?UTF-8?q?feat:=E4=B8=B4=E6=97=B6=E8=A7=A3=E5=86=B3?= =?UTF-8?q?react=20v18=E4=B8=AD=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 10 +++++----- src/useCodePreview.ts | 40 ++++++++++++++++++++++++++++++++++++---- website/Example.tsx | 6 +++--- website/index.tsx | 6 +++--- 4 files changed, 47 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index db4b013d..e2ed5f4c 100644 --- a/package.json +++ b/package.json @@ -52,8 +52,8 @@ "@kkt/raw-modules": "~7.1.1", "@kkt/scope-plugin-options": "~7.1.1", "@types/babel__standalone": "~7.1.4", - "@types/react": "~17.0.39", - "@types/react-dom": "~17.0.13", + "@types/react": "18.0.5", + "@types/react-dom": "18.0.1", "@types/react-test-renderer": "~17.0.1", "@uiw/react-github-corners": "~1.5.3", "@uiw/react-markdown-preview": "~3.5.1", @@ -63,8 +63,8 @@ "kkt": "~7.1.5", "lint-staged": "~12.3.5", "prettier": "~2.5.1", - "react": "~17.0.2", - "react-dom": "~17.0.2", + "react": "18.0.0", + "react-dom": "18.0.0", "react-test-renderer": "~17.0.2", "source-map-explorer": "~2.5.2", "tsbb": "~3.7.2", @@ -101,4 +101,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file diff --git a/src/useCodePreview.ts b/src/useCodePreview.ts index aee3c88a..56bc88c8 100644 --- a/src/useCodePreview.ts +++ b/src/useCodePreview.ts @@ -1,5 +1,5 @@ import React, { useEffect, useRef } from 'react'; -import ReactDOM from 'react-dom'; +import ReactDOMClient from 'react-dom/client'; import { useState } from 'react'; import { babelTransform } from './transform'; import { CodePreviewProps } from './'; @@ -14,12 +14,36 @@ export function useCodePreview(props: CodePreviewProps) { const [copied, setCopied] = useState(false); const [code, setCode] = useState(props.code || ''); + /** 通过缓存的方式 临时解决 react v18 中 的报错 ***/ + const cachesRef = React.useRef(new Map([])); + const ReactDOMRender = { + createRoot: (id: string) => { + return { + render: (render: React.ReactChild | Iterable) => { + const caches = cachesRef.current; + let root = caches.get(id); + // 存在则不需要重新创建直接进行render操作 + if (root) { + root.render(render); + } else { + root = ReactDOMClient.createRoot(document.getElementById(id)!); + root.render(render); + // 缓存，临时解决控制台报 ReactDOMClient.createRoot 问题 + caches.set(id, root); + } + cachesRef.current = caches; + }, + }; + }, + }; + /** ------------------------ ***/ + const executeCode = (str: string) => { - const { React: _React, ReactDOM: _ReactDOM, ...otherDeps } = props.dependencies || {}; + const { React: _React, ReactDOM, ...otherDeps } = props.dependencies || {}; try { const deps = { React: _React || React, - ReactDOM: _ReactDOM || ReactDOM, + ReactDOMClient: ReactDOMRender, ...otherDeps, } as any; // const args = ['context', 'React', 'ReactDOM', 'Component']; @@ -30,7 +54,15 @@ export function useCodePreview(props: CodePreviewProps) { args.push(key); argv.push(deps[key]); } - str = str.replace('_mount_', `document.getElementById('${playerId.current}')`); + // react < v18 中写法替换 + str = str.replace('ReactDOM.render', `ReactDOMClient.createRoot("${playerId.current}").render`); + // react v18 中写法替换 + str = str.replace( + `ReactDOMClient.createRoot(_mount_).render`, + `ReactDOMClient.createRoot("${playerId.current}").render`, + ); + str = str.replace('_mount_', ``); + const input = `${str}`; const { code } = babelTransform(input); args.push(code || ''); diff --git a/website/Example.tsx b/website/Example.tsx index c63e9cbe..c9269fe0 100644 --- a/website/Example.tsx +++ b/website/Example.tsx @@ -3,10 +3,11 @@ import CodePreview from '../'; import { Switch } from 'uiw'; import * as UIW from 'uiw'; -const defaultCode = `import ReactDOM from 'react-dom'; +const defaultCode = ` import { Button, Divider, Icon } from 'uiw'; +import ReactDOMClient from 'react-dom/client'; -ReactDOM.render( +ReactDOMClient.createRoot(_mount_).render(
@@ -15,7 +16,6 @@ ReactDOM.render(
, - _mount_ );`; const Example = () => { diff --git a/website/index.tsx b/website/index.tsx index aa52b797..7f8163d8 100644 --- a/website/index.tsx +++ b/website/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +// import ReactDOM from 'react-dom'; +import ReactDOM from 'react-dom/client'; import '@uiw/reset.css/reset.less'; import App from './App'; -ReactDOM.render( +ReactDOM.createRoot(document.getElementById('root')).render( , - document.getElementById('root'), ); From 87a5ed5e6c3d1fb7a79de28d19dc7c721837522d Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Fri, 22 Apr 2022 08:17:38 +0800 Subject: [PATCH 02/11] =?UTF-8?q?fix:=E8=A6=86=E7=9B=96=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/useCodePreview.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/useCodePreview.ts b/src/useCodePreview.ts index 56bc88c8..111ddd5c 100644 --- a/src/useCodePreview.ts +++ b/src/useCodePreview.ts @@ -39,12 +39,12 @@ export function useCodePreview(props: CodePreviewProps) { /** ------------------------ ***/ const executeCode = (str: string) => { - const { React: _React, ReactDOM, ...otherDeps } = props.dependencies || {}; + const { React: _React, ReactDOM, ReactDOMClient, ...otherDeps } = props.dependencies || {}; try { const deps = { React: _React || React, - ReactDOMClient: ReactDOMRender, ...otherDeps, + ReactDOMClient: ReactDOMRender, } as any; // const args = ['context', 'React', 'ReactDOM', 'Component']; const args = []; From 8d98d9781a65b2ad62e2bfdf623e0729705e3442 Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Fri, 22 Apr 2022 15:34:25 +0800 Subject: [PATCH 03/11] =?UTF-8?q?fix:=E5=85=BC=E5=AE=B9react=20<=20v18?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/useCodePreview.ts | 78 ++++++++++++++++++++++++++----------------- website/Example.tsx | 3 +- 2 files changed, 50 insertions(+), 31 deletions(-) diff --git a/src/useCodePreview.ts b/src/useCodePreview.ts index 111ddd5c..d54cbc44 100644 --- a/src/useCodePreview.ts +++ b/src/useCodePreview.ts @@ -1,5 +1,7 @@ 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 './'; @@ -14,37 +16,51 @@ export function useCodePreview(props: CodePreviewProps) { const [copied, setCopied] = useState(false); const [code, setCode] = useState(props.code || ''); - /** 通过缓存的方式 临时解决 react v18 中 的报错 ***/ + /** 通过缓存的方式 解决 react v18 中 的报错 ***/ + // @ts-ignore const cachesRef = React.useRef(new Map([])); - const ReactDOMRender = { - createRoot: (id: string) => { - return { - render: (render: React.ReactChild | Iterable) => { - const caches = cachesRef.current; - let root = caches.get(id); - // 存在则不需要重新创建直接进行render操作 - if (root) { - root.render(render); - } else { - root = ReactDOMClient.createRoot(document.getElementById(id)!); - root.render(render); - // 缓存，临时解决控制台报 ReactDOMClient.createRoot 问题 - caches.set(id, root); - } - cachesRef.current = caches; - }, - }; - }, + const ReactDOMRender = (_ReactDOM: typeof ReactDOMClient) => { + return { + createRoot: (id: string) => { + return { + render: (render: React.ReactChild | Iterable) => { + const caches = cachesRef.current; + let root = caches.get(id); + // 存在则不需要重新创建直接进行render操作 + if (root) { + root.render(render); + } else { + // @ts-ignore + root = _ReactDOM.createRoot(document.getElementById(id)!); + root.render(render); + // 缓存，解决控制台报 ReactDOMClient.createRoot 问题 + caches.set(id, root); + } + cachesRef.current = caches; + }, + }; + }, + }; }; /** ------------------------ ***/ const executeCode = (str: string) => { - const { React: _React, ReactDOM, ReactDOMClient, ...otherDeps } = props.dependencies || {}; + const { + React: _React, + ReactDOM: _ReactDOM, + ReactDOMClient: _ReactDOMClient, + ...otherDeps + } = props.dependencies || {}; + const V18ReactDOM = _ReactDOMClient || ReactDOMClient || _ReactDOM || ReactDOM; + // 判断是否是 react v18版本 + const isV18 = Reflect.has(V18ReactDOM || {}, 'createRoot'); + const NewReactDOM = isV18 ? ReactDOMRender(V18ReactDOM) : V18ReactDOM; + try { const deps = { React: _React || React, ...otherDeps, - ReactDOMClient: ReactDOMRender, + ReactDOM: NewReactDOM, } as any; // const args = ['context', 'React', 'ReactDOM', 'Component']; const args = []; @@ -54,14 +70,16 @@ export function useCodePreview(props: CodePreviewProps) { args.push(key); argv.push(deps[key]); } - // react < v18 中写法替换 - str = str.replace('ReactDOM.render', `ReactDOMClient.createRoot("${playerId.current}").render`); - // react v18 中写法替换 - str = str.replace( - `ReactDOMClient.createRoot(_mount_).render`, - `ReactDOMClient.createRoot("${playerId.current}").render`, - ); - str = str.replace('_mount_', ``); + + if (isV18) { + // 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('_mount_', ``); + } else { + str = str.replace('_mount_', `document.getElementById('${playerId.current}')`); + } const input = `${str}`; const { code } = babelTransform(input); diff --git a/website/Example.tsx b/website/Example.tsx index c9269fe0..dd7d748e 100644 --- a/website/Example.tsx +++ b/website/Example.tsx @@ -7,7 +7,7 @@ const defaultCode = ` import { Button, Divider, Icon } from 'uiw'; import ReactDOMClient from 'react-dom/client'; -ReactDOMClient.createRoot(_mount_).render( +ReactDOM.render(
@@ -16,6 +16,7 @@ ReactDOMClient.createRoot(_mount_).render(
, + _mount_ );`; const Example = () => { From 28f9cd882f7bc86473f9972cb1701a8f5e339f26 Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Fri, 22 Apr 2022 20:48:55 +0800 Subject: [PATCH 04/11] =?UTF-8?q?test:=E4=BF=AE=E5=A4=8D=E6=B5=8B=E8=AF=95?= =?UTF-8?q?=E7=94=A8=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index e2ed5f4c..ee8616d7 100644 --- a/package.json +++ b/package.json @@ -52,9 +52,9 @@ "@kkt/raw-modules": "~7.1.1", "@kkt/scope-plugin-options": "~7.1.1", "@types/babel__standalone": "~7.1.4", - "@types/react": "18.0.5", - "@types/react-dom": "18.0.1", - "@types/react-test-renderer": "~17.0.1", + "@types/react": "~18.0.5", + "@types/react-dom": "~18.0.1", + "@types/react-test-renderer": "~18.0.0", "@uiw/react-github-corners": "~1.5.3", "@uiw/react-markdown-preview": "~3.5.1", "@uiw/reset.css": "~1.0.6", @@ -63,9 +63,9 @@ "kkt": "~7.1.5", "lint-staged": "~12.3.5", "prettier": "~2.5.1", - "react": "18.0.0", - "react-dom": "18.0.0", - "react-test-renderer": "~17.0.2", + "react": "~18.0.0", + "react-dom": "~18.0.0", + "react-test-renderer": "~18.0.0", "source-map-explorer": "~2.5.2", "tsbb": "~3.7.2", "uiw": "~4.13.6" From a871ee1127261d27dea1b9c027477b4678248822 Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Sat, 23 Apr 2022 11:25:56 +0800 Subject: [PATCH 05/11] =?UTF-8?q?fix:react=2017=20=E6=8A=A5=E9=94=99?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/useCodePreview.ts | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/src/useCodePreview.ts b/src/useCodePreview.ts index d54cbc44..1c55b97d 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 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 { From 8a14ffb1ca450ded179e13229e581f0b41e42176 Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Sat, 23 Apr 2022 12:16:11 +0800 Subject: [PATCH 06/11] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E9=A2=84=E8=A7=88?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=9D=97=E4=B8=AD=E7=AC=A6=E5=8F=B7=E7=A9=BA?= =?UTF-8?q?=E7=99=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; From 038f633ef8ae43a4e3793f4e4d46b4a9cc48190e Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Sat, 23 Apr 2022 12:46:13 +0800 Subject: [PATCH 07/11] =?UTF-8?q?chore:=E4=BE=9D=E8=B5=96=E5=8D=87?= =?UTF-8?q?=E7=BA=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 13a249c8..145427ba 100644 --- a/package.json +++ b/package.json @@ -55,8 +55,8 @@ "@types/react": "~18.0.5", "@types/react-dom": "~18.0.1", "@types/react-test-renderer": "~18.0.0", - "@uiw/react-github-corners": "~1.5.3", - "@uiw/react-markdown-preview": "~3.5.1", + "@uiw/react-github-corners": "~1.5.14", + "@uiw/react-markdown-preview": "~4.0.6", "@uiw/reset.css": "~1.0.6", "@wcj/dark-mode": "^1.0.14", "compile-less-cli": "~1.8.11", From eeafb8e8e6e7afb8eda8996dc7db6923463ca2b3 Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Sat, 23 Apr 2022 13:02:15 +0800 Subject: [PATCH 08/11] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E6=A1=88=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- website/Example.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/website/Example.tsx b/website/Example.tsx index 1a0c2e6c..f0737899 100644 --- a/website/Example.tsx +++ b/website/Example.tsx @@ -7,7 +7,7 @@ const defaultCode = ` import { Button, Divider, Icon } from 'uiw'; import ReactDOMClient from 'react-dom/client'; -ReactDOM.render( +ReactDOMClient.createRoot(_mount_).render(
@@ -16,7 +16,6 @@ ReactDOM.render(
, - _mount_ );`; const Example = () => { From 9374f1cb852b401e4aaca50ab10e1021d269ca60 Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Sat, 23 Apr 2022 13:38:16 +0800 Subject: [PATCH 09/11] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=20=20codepen=20?= =?UTF-8?q?=E5=92=8C=20codesandbox=20=E7=9A=84=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/useCodePreview.ts | 4 ++-- website/Example.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/useCodePreview.ts b/src/useCodePreview.ts index 1c55b97d..06c900cc 100644 --- a/src/useCodePreview.ts +++ b/src/useCodePreview.ts @@ -26,7 +26,7 @@ export function useCodePreview(props: CodePreviewProps) { const [code, setCode] = useState(props.code || ''); const ReactDOMClient = React.useMemo(() => { - return getReactDOMClient(); + return window.ReactDOM ? window.ReactDOM : getReactDOMClient(); }, []); /** 通过缓存的方式 解决 react v18 中 的报错 ***/ @@ -88,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 f0737899..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'; -ReactDOMClient.createRoot(_mount_).render( +ReactDOM.createRoot(_mount_).render(
@@ -80,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) { From c0324bf3e0c8e8af7fac8343d5fc3b0a12bc5d84 Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Sat, 23 Apr 2022 13:45:10 +0800 Subject: [PATCH 10/11] =?UTF-8?q?doc:=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 4dff81bb..45d58908 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() { @@ -52,14 +51,13 @@ import Button from '@uiw/react-button'; import CodePreview from '@uiw/react-code-preview'; const code = `import Button from '@uiw/react-button'; -import ReactDOM from 'react-dom'; +import ReactDOM from 'react-dom/client'; -ReactDOM.render( +ReactDOM.createRoot(_mount_).render(
, - _mount_ );`; export default function App() { From b5eba5e041b145fe50f97d85be9cc4d70d1ee629 Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Sat, 23 Apr 2022 13:48:35 +0800 Subject: [PATCH 11/11] =?UTF-8?q?doc:=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 45d58908..d12ade7e 100644 --- a/README.md +++ b/README.md @@ -51,13 +51,14 @@ import Button from '@uiw/react-button'; import CodePreview from '@uiw/react-code-preview'; const code = `import Button from '@uiw/react-button'; -import ReactDOM from 'react-dom/client'; +import ReactDOM from 'react-dom'; -ReactDOM.createRoot(_mount_).render( +ReactDOM.render(
, + _mount_ );`; export default function App() {