将 jQuery 插件集成到 NextJS 中

Question

将 jQuery 插件集成到 NextJS 中

我正在尝试集成一个六年前的 jQuery 插件，但我不能。

我尝试使用 react-dom 中的 findDOMNode 模块，甚至使用 React Official Docs 的方式来集成 jQuery 插件，但都没有。

这是我的插件 --> https://www.jqueryscript.net/layout/Fancy-Responsive-jQuery-Diamond-Layout-Plugin-diamonds-js.html

我收到了一些错误，例如

类型错误：jquery__WEBPACK_IMPORTED_MODULE_8___default(...)(...).Diamonds 不是函数

ReferenceError: the window is not defined // 我收到这个错误是因为库使用了最后一行中的窗口

我还向您展示了我用来初始化元素的代码段。

componentDidMount() {
  //   $(".diamondswrap").diamonds({
  //     size : 200, // Size of diamonds in pixels. Both width and height. 
  //     gap : 5, // Pixels between each square.
  //     hideIncompleteRow : false, // Hide last row if there are not enough items to fill it completely.
  //     autoRedraw : true, // Auto redraw diamonds when it detects resizing.
  //     itemSelector : ".item" // the css selector to use to select diamonds-items.
  // });

  if(typeof window !== 'undefined') {
    window.Diamonds = require('../assets/js/jquery.diamonds.js');
  }
  new Diamonds.Diamonds();
  }

Run Code Online (Sandbox Code Playgroud)

谢谢，对不起我的英语！

Answer 1

tud*_*ely 6

我创建了一个小型 Github 存储库，您可以在其中查看：https : //github.com/tudorgergely/jquery-plugin-nextjs/

这是工作演示：https : //jquery-plugin-nextjs.now.sh/

基本上你需要一些东西，首先使用没有ssr的动态组件渲染jquery-diamonds：

const DynamicJqueryDiamonds = dynamic(
    () => import('../components/JqueryDiamonds'),
    { loading: () => <p>...</p>, ssr: false }
);

Run Code Online (Sandbox Code Playgroud)

然后在该组件内在 componentDidMount/useEffect 中加载 jquery/diamonds：

    useEffect(() => {
        window.jQuery = require('../public/jquery-latest.min');
        window.Diamonds = require('../public/jquery.diamonds.js');

        window.jQuery("#demo").diamonds({
            size : 100, // Size of diamonds in pixels. Both width and height.
            gap : 5, // Pixels between each square.
            hideIncompleteRow : false, // Hide last row if there are not enough items to fill it completely.
            autoRedraw : true, // Auto redraw diamonds when it detects resizing.
            itemSelector : `.${styles.item}` // the css selector to use to select diamonds-items.
        });
    }, []);

Run Code Online (Sandbox Code Playgroud)

最后一件事，不要忘记在 pages/index.js 中包含你的 css：

例如：

export default function Index() {
    return (
        <div>
            <Head>
                <title>Test</title>
                <link href="/diamonds.css" rel="stylesheet" key="test"/>
            </Head>
            <DynamicJqueryDiamonds/>
        </div>
    );
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，7 月前
查看次数：	6530 次
最近记录：	5 年，7 月前