Bootstrap下拉列表没有打开第一次点击React 16

Question

使用以下内容:Bootstrap 4.0.0-beta.2,popper.js 1.13.0和React 16.0.0.我的React应用程序中有多个下拉按钮,并且在第一次单击时它们无法打开.第一次单击后,它们按预期工作,并在第一次单击时打开和关闭.有任何想法吗？

<div className="dropdown">
    <button type="button" className="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
    <div className="dropdown-menu dropdown-menu-right">
        <Link role="button" className="dropdown-item text-sm" to={path1}>Click me</Link>
        <Link role="button" className="dropdown-item text-sm" to={path2}>Click me</Link>
        <Link role="button" className="dropdown-item text-sm" to={path3}>Click me</Link>
    </div>
</div>

这是我在app.jsx中加载的方式

//load bootstrap and app css
import Popper from 'popper.js';
window.Popper = Popper;
import 'bootstrap';
import 'style-loader!css-loader!sass-loader!applicationStyles';

这就是我在webpack.config.js文件中加载bootstrap,jQuery和popper.js的方法

entry: [
    'script-loader!jquery/dist/jquery.min.js',
    'script-loader!popper.js/dist/umd/popper.min.js',
    'script-loader!bootstrap/dist/js/bootstrap.min.js',
    'babel-polyfill',
    './app/app.jsx',
],
externals: {
    jQuery: 'jQuery'
},
plugins: [
    // new BundleAnalyzerPlugin(),
    new webpack.ProvidePlugin({
        '$': 'jQuery',
        'jQuery': 'jQuery',
        Popper: ['popper.js', 'default'],
    }),

我尝试添加$('.dropdown-toggle').dropdown()到onClick,但也没有用

解决方案结果我使用webpack.config.js文件中的条目和app.jsx中的import 'bootstrap'语句两次加载Bootstrap 所以我注释掉了import 'bootstrap'它的工作原理

Answer 1

你可能有两次jQuery或Bootstrap.我没有使用React,但是我遇到了与Angular相同的问题.事实证明,我在我的index.html中包含了jQuery/Bootstrap以及我的"脚本"配置(我认为这将是你的"条目").

Answer 2

您应该导入此行并再次测试：

import 'bootstrap/dist/js/bootstrap.bundle';

这对我来说就像一个魅力:)