组件属性`noPreview`状态切换，页面的所有组件views全部丢失

[LonelyFellas]

Screen.Recording.2024-03-25.at.3.06.24.PM.mov

[jaywcjlove]

react-code-preview/src/useCodePreview.ts

Lines 40 to 52 in 97e4c6c

	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;

上面示例是找到 dom 重新 render， 当你切换示例预览的时候，导致 ReactDOMRoot root 节点还是以前的，如下代码切换的时候 dom 节点被更新了

react-code-preview/src/index.tsx

Lines 195 to 216 in 97e4c6c

	{!noPreview && !onlyEdit && (
	<div
	className={[
	`${prefixCls}-demo`,
	!bgWhite ? `${prefixCls}-demo-bgPlaid` : null,
	errorMessage ? `${prefixCls}-demo-error` : null,
	]
	.filter(Boolean)
	.join(' ')
	.trim()}
	style={{
	flex: 1,
	...(width === 1 ? { width: '100%' } : {}),
	}}
	>
	<ErrorMessage message={errorMessage} />
	<div
	className={[`${prefixCls}-demo-source`, errorMessage ? 'error' : null].filter(Boolean).join(' ').trim()}
	id={playerId.current}
	/>
	</div>
	)}

@LonelyFellas

[LonelyFellas]

@jaywcjlove 我知道。所以这块怎么改呢。
是不是应该在监听onPreview为false属性中把这个dom移除掉呢

[jaywcjlove]

@LonelyFellas 有一个解决方法，对预览的展示隐藏通过 css 去控制节点就不会被移除