2017-11-22 1 views
0

다음을 사용하십시오. 부트 스트랩 4.0.0-beta.2, popper.js 1.13.0 및 React 16.0.0. React 앱에 여러 개의 드롭 다운 버튼이 있으며 처음 클릭 할 때 열리지 않습니다. 첫 번째 클릭 후 예상대로 작동하고 첫 번째 클릭시 열리고 닫힙니다. 어떤 아이디어?부트 스트랩 드롭 다운에서 첫 번째 클릭이 열리지 않습니다. 16

<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에 추가하려고 시도했지만 작동하지 않습니다.

해결 방법 내가 두 번 webpack.config.js 파일의 항목과 app.jsx에서 import 'bootstrap' 문을 모두 사용하여 부트 스트랩을 장착했다 밝혀 그래서 나는 밖으로 import 'bootstrap' 댓글을 달았 그것은

+0

플러그인 배열이 닫혀 있지 않습니다. – 1stthomas

+0

@ Firstthomas가 의견에 감사드립니다. 코드를 최소한으로 유지하기 위해 webpack.config.js 파일의 하위 섹션을 포함 시켰습니다. 가득 차있는 버전에서 닫힙니다 – Blackstone4

답변

1

작동 당신은 jQuery를 또는 부트 스트랩을 두 번 포함되어있을 수 있습니다. 나는 React를 사용하지 않지만 Angular와 같은 문제가있었습니다. 내 index.html에 jQuery/Bootstrap을 포함시키고 "스크립트"구성 (내 생각에 "엔트리"라고 생각합니다)이 밝혀졌습니다.

+0

고마워요 루이스 - 내가 부트 스트랩을 두 번로드 한 것으로 나타났습니다. – Blackstone4

관련 문제