next.js项目中react-quill库的问题

vmjh9lq9 于 2023-10-18 发布在 React

关注(0)|答案(3)|浏览(210)

我遇到了一个奇怪的问题。我使用NextJS的服务器端渲染功能，我使用ReactQuill作为我的富文本编辑器。为了绕过ReactQuill与DOM的关系，我动态导入它。然而，这带来了另一个问题，那就是当我试图通过锚链接访问我正在导入的组件时，ReactQuill不起作用，但我可以通过手动点击路由来访问它。这是我的目录概述，

components/
  crud/
    BlogCreate.js
pages/
  admin/
    crud/
      blog.js
    index.js
  blogs/
    index.js

在我的pages/admin/index.js

...
    <li className="list-group-item">
      <Link href="/admin/crud/blog">
        <a>Create Blog</a>
      </Link>
    </li>
  ...

在我的pages/admin/crud/blog.js

import BlogCreate from "../../../components/crud/BlogCreate";
...
<div className="col-md-12">
  <BlogCreate />
</div>

在我的components/crud/BlogCreate.js

import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import "../../node_modules/react-quill/dist/quill.snow.css";
...
        <div className="form-group">
          <ReactQuill
            value={body}
            placeholder="Write something amazing..."
            onChange={handleBody}
          />
        </div>

为了在components/crud/BlogCreate.js中使用import "../../node_modules/react-quill/dist/quill.snow.css"，我使用@zeit/next-css，这里是我的next.config.js

const withCSS = require("@zeit/next-css");
module.exports = withCSS({
  publicRuntimeConfig: {
...
  }
});

问题

当我点击Create Blog它应该重定向我http://localhost:3000/admin/crud/blog，但它只是冻结.

但如果我手动点击http://localhost:3000/admin/crud/blog，然后它去的愿望页面和工作完美。

只要我手动加载该页面，然后Create Blog工作。现在我真的不明白问题出在哪里？因为它没有显示错误，这就是为什么我没有任何术语来描述我的问题，这就是为什么我给予所有讨厌的代码和目录，我怀疑这个错误的原因。

next.js

来源：https://stackoverflow.com/questions/61001002/problem-with-react-quill-library-with-next-js-project

3条答案

按热度按时间

lokaqttq1#

这是很难给予你任何解决方案，而不看到整个项目（正如你提到的，它显示没有错误）。您可以删除@zeit/next-css插件，因为Next.js 9.3内置了Sass对全局样式表的支持。你也可以在CSS中使用它。
创建一个pages/_app.js文件（如果尚未存在）。然后，导入quill.snow.css文件：

import "../../node_modules/react-quill/dist/quill.snow.css";

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

如果它给出任何错误，那么您可以创建一个目录/文件，将quill.snow.css代码复制粘贴到该文件中。

pages/
  _app.js
styles/
  quill_style.css

然后在_app.js中导入文件，如下所示：

import "../styles/styles_quill.css";

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

最终你也可以在这里导入你的自定义gobal css。
如果问题仍然存在，请提供您的git仓库。快乐编码️

赞(0）回复(0）举报 2023-10-18

oxiaedzo2#

首先：删除你的@zeit/next-css设置，从next.js版本10开始就不再需要了。
第二：将nex.js更新到版本10，然后您可以在模块上使用常规导入。

import "../../node_modules/react-quill/dist/quill.snow.css";

顺便说一下，我在你的NextJS课程中遇到了同样的问题。;）

赞(0）回复(0）举报 2023-10-18

6za6bjd03#

这是我如何解决这个问题的解决方案。

import React, { forwardRef } from "react";
import dynamic from "next/dynamic";
import "react-quill/dist/quill.snow.css";
import "react-quill/dist/quill.bubble.css";

const ReactQuill = dynamic(
    async () => {
        const { default: RQ } = await import("react-quill");
        return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
    },
    {
        ssr: false,
    }
);

const CustomEditor = forwardRef((props, ref) => {
    const { theme = "snow", height = 150, placeholder = "Write your message...", ...rest } = props;
    return (
        <ReactQuill
            forwardedRef={ref}
            style={{ height: height, marginBottom: "48px" }}
            theme={theme}
            placeholder={placeholder}
            modules={{
                clipboard: {
                    matchVisual: false,
                },
            }}
            {...rest}
        />
    );
});

export default CustomEditor;

赞(0）回复(0）举报 2023-10-18

我来回答

next.js项目中react-quill库的问题

3条答案

相关问题

热门标签

最新问答