New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix:react 17 报错问题 (#216) #217
Merged
Merged
Changes from 8 commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
b3a4874
feat:临时解决react v18中报错问题
SunLxy 87a5ed5
fix:覆盖参数
SunLxy 8d98d97
fix:兼容react < v18
SunLxy 2f68ebc
Merge branch 'uiwjs:master' into master
SunLxy 28f9cd8
test:修复测试用例
SunLxy a871ee1
fix:react 17 报错问题
SunLxy 79b8336
merge:合并代码
SunLxy 8a14ffb
fix:修复预览代码块中符号空白
SunLxy 038f633
chore:依赖升级
SunLxy eeafb8e
fix:修改案例
SunLxy 9374f1c
fix:修复 codepen 和 codesandbox 的预览
SunLxy c0324bf
doc:更新文档
SunLxy b5eba5e
doc:更新文档
SunLxy File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<HTMLDivElement>(); | ||
|
@@ -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<string, ReactDOMClient.Root>([])); | ||
|
@@ -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; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @SunLxy 处理方法仍然有问题,我们的代码放到 codepen 和 codesandbox 中是可以预览的 |
||
|
||
try { | ||
|
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@SunLxy 在
"@uiw/react-markdown-preview": "~4.0.6"
报错?