ブートストラップのドロップダウンで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に、ブートストラップ、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に追加しようとしましたが、どちらも動作しませんでした。

解決策は、私は二度私はimport 'bootstrap'コメントアウトし、それはあなたがjQueryのか、ブートストラップが二度含まれていて

Answer 1

を作品app.jsxにwebpack.config.jsファイル内のエントリとimport 'bootstrap'文の両方を使用してブートストラップをロードしていたが判明します。私はReactを使用していませんが、Angularと同じ問題がありました。私のindex.htmlにjQuery/Bootstrapを含めていたことがわかりました。これは私の "スクリプト"設定（あなたの "エントリー"と思われる）の設定です。