reactjs - 引用错误: jQuery is not defined in react-bootstrap-select

Question

似乎react-bootstrap-select需要jQuery。但在 GitHub 使用部分，他们提到只需要这三个。

https://github.com/tjwebb/react-bootstrap-select

React = require('react');
React.Bootstrap = require('react-bootstrap');
React.Bootstrap.Select = require('react-bootstrap-select');

我没有在我的 react 项目中使用 jQuery 。有没有没有 jQuery 的 react-bootstrap-select 的替代方案。

还有一些其他的 react 库可供选择，但它们没有像 react-bootstrap-select 那样在下拉菜单下有单独的搜索框。附件是我想要的选择框的图像。

任何帮助将不胜感激。

Answer 1

我已经通过此代码添加了 jQuery:

const jQuery = require('jquery');
window.jQuery = jQuery;
React.Bootstrap = require('react-bootstrap');
React.Bootstrap.Select = require('react-bootstrap-select');

然后报错

jQuery is not defined

消失了。

但是

它仍然对我不起作用，因为 react-bootstrap-select 仍在使用 React.createClass ，它在reactjs 16中被删除。所以我仍然收到错误

TypeError: React.createClass is not a function

我现在面临的问题是使用与 react-bootstrap-select 不同的库。希望这会有所帮助。

更新

我现在可以使用包bootstrap-select而不是react-bootstrap-select来工作。它适用于以下导入:

const jQuery = require('jquery');
window.jQuery = jQuery;
import ('bootstrap-select/dist/css/bootstrap-select.min.css');
require('bootstrap-select');

然后就可以使用

componentDidMount() {
    jQuery('.selectpicker').selectpicker();
}

或

componentDidUpdate() {
    jQuery('.selectpicker').selectpicker();
}

和/或使用bootstrap-select选项

componentDidMount() {
     jQuery('.selectpicker').selectpicker({
         liveSearch:true,
         selectOnTab: true,
     });
}

我不知道这是否是最好的方法，但它确实有效。