React中使用Isotope.js报错：$(...).isotope is not a function

这个报错的核心原因很明确：jQuery没有识别到Isotope插件——也就是说Isotope并没有成功挂载到jQuery的原型链上，导致你调用.isotope()方法时找不到对应的函数。下面是一步步的解决方案：

第一步：确认安装的是正确的npm包 #

首先排查依赖包是否正确：官方维护的Isotope包是isotope-layout，旧的isotope包已经废弃。如果之前装错了，先卸载重装：

npm uninstall isotope --save
npm install isotope-layout --save

第二步：正确关联jQuery与Isotope #

在你的Portfolio组件文件顶部，必须先引入jQuery，再引入Isotope的打包文件，这样Isotope才能自动绑定到jQuery上：

import $ from 'jquery';
// 引入Isotope的完整打包版，让它挂载到jQuery
import 'isotope-layout/dist/isotope.pkgd.min.js';

如果webpack的模块隔离机制导致Isotope找不到jQuery，你可以手动把jQuery挂载到全局window对象上（虽然不推荐全局挂载，但在插件依赖场景下是可行的）：

import $ from 'jquery';
// 全局暴露jQuery，让Isotope能识别到它
window.jQuery = $;
window.$ = $;
// 之后再引入Isotope
import 'isotope-layout/dist/isotope.pkgd.min.js';

第三步：优化初始化逻辑（可选但推荐） #

你的componentDidMount初始化逻辑本身没问题，但可以加个DOM节点存在判断，避免潜在的空值错误，同时可以补充Isotope的基础配置：

componentDidMount() {
  const portfolioGrid = this.portGridRef.current;
  if (portfolioGrid) {
    $(portfolioGrid).isotope({
      itemSelector: '.portfolio-item', // 对应你的PortfolioItem根元素类名
      layoutMode: 'masonry', // 按需设置布局模式
      transitionDuration: '0.6s'
    });
  }
}

额外方案：放弃jQuery，使用原生JS版Isotope #

如果不想依赖jQuery，你可以直接使用Isotope的原生JS API，更符合React的生态：

import Isotope from 'isotope-layout';

componentDidMount() {
  const portfolioGrid = this.portGridRef.current;
  if (portfolioGrid) {
    new Isotope(portfolioGrid, {
      itemSelector: '.portfolio-item',
      layoutMode: 'masonry'
    });
  }
}

内容的提问来源于stack exchange，提问作者Agraj Yadav