将Bootstrap等依赖从index.html迁移到package.json后组件失效如何解决

• 第一步：安装对应版本的依赖包
  你之前使用的是Bootstrap 4.0.0 + jQuery 3.2.1，需安装对应版本避免兼容性问题，执行命令：

npm install jquery@3.2.1 bootstrap@4.0.0

• 第二步：调整导入顺序，挂载全局jQuery
  Bootstrap 4 的JS逻辑依赖全局作用域下的jQuery对象，仅单独导入包不会自动挂载到window上，需要在项目入口文件（通常为index.js/App.js）的最顶部按如下顺序导入：

// 先挂载jQuery到全局
import $ from 'jquery';
window.$ = $;
window.jQuery = $;

// 再导入Bootstrap资源，顺序不可调换
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

注意：不要删除bootstrap.bundle的导入，该包已经内置了Bootstrap4所需的Popper.js依赖，无需额外安装

完成上述配置后如果按钮仍无响应，是因为React组件动态渲染的时机问题：原生Bootstrap会在页面加载完成时扫描DOM初始化data-*属性对应的交互，此时你的导航栏组件可能还未渲染到DOM上，导致事件未绑定。
只需在导航栏组件的componentDidMount生命周期中手动初始化折叠组件即可：

class NavbarToBeConnected extends React.Component {
  componentDidMount() {
    // 手动初始化当前导航栏的折叠功能
    window.$('#navbarToggleExternalContent').collapse();
  }
  // 原有代码保持不变
  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }
  // 原有render逻辑不变
}

如果不想处理全局jQuery和DOM手动初始化问题，也可以直接使用适配React的react-bootstrap组件库，所有交互逻辑均通过React状态控制，更符合React开发规范。

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