CodeMirror 在 Nextjs 中状态更改或组件重新渲染时破坏了其样式。在开发期间一切正常，但在生产中却不行

Question

我在我的 Nextjs 项目中使用了 React-codemirror 版本

^4.20.2

。开发环境一切正常。但是，当我在 Vercel 上部署 Nextjs 应用程序时，Codemirror 组件在组件重新渲染或与 Codemirror 组件内的代码关联的某些状态更改时破坏了其外观和样式。如果有人有任何解决方案，请帮忙。附上问题截图：

这是我使用此组件的代码的一部分：

import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night";
import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';

export default function Editor({ setLoader, activeCode, setActiveCode }) {
    const [code, setCode] = useState("");
    <CodeMirror
              value={code}
              lang="js"
              extensions={[javascript({jsx: true})]}
              onChange={(val)=>{setCode(val)}}
              theme={tokyoNight}
              highlightSelectionMatches={true}
              style={{
                  width: "90%",
                  height: "300px",
                  position: "relative",
                  marginBottom: "5%",
                  fontSize: "5px",
              }}
          />
}

我尝试使用 useRef 来存储 Code 的值以防止组件重新渲染，但我只需要使用 useState，因为还有其他事情需要反映更改。请帮忙。预先感谢。

Answer 1

您可以使用自定义元素和 ShadowDOM 来解决此问题。坚持住，别跑！设置起来还不错。

ShadowDOM 将 CodeMirror 样式封装在自己的文档中，Next.js 不会删除它，因为它与根文档的

<head>

完全分开。 CodeMirror 在 ShadowDOM 中工作得很好，只需提供

shadowRoot

作为

root

的

EditorViewConfig 属性即可。

我们有自己的 React CodeMirror 自定义包装器，不需要太多操作就可以插入自定义元素的 Shadow DOM 中。这是使用 React 渲染的自定义元素 Shadow DOM 中 CodeMirror 的简化版本：https://codepen.io/shshaw/pen/qBvyyLe?editors=0010

React CodeMirror 似乎有一个

root

属性，您可以使用它来帮助安装到 Shadow DOM，但我不确定如何将其包装在自定义元素的 Shadow DOM 中.

以下是一些有关 Shadow DOM 使用的有用资源：

CodeMirror 在 Nextjs 中状态更改或组件重新渲染时破坏了其样式。在开发期间一切正常，但在生产中却不行

问题描述投票：0回答：1

1个回答

最新问题

CodeMirror 在 Nextjs 中状态更改或组件重新渲染时破坏了其样式。在开发期间一切正常，但在生产中却不行

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1