Bootstrap手風琴在單擊時未擴展

Question

引導手風琴在單擊時不會擴展。 我已經使用npm作為本地依賴項安裝了bootstrap和jquery，並且都將其導入了根組件（即App.js），但由於某種原因，似乎沒有檢測到jquery。 如果我做錯了，請糾正我。

GenerateMethods組件：

import React, { Component } from 'react';
import { browserHistory, Link } from 'react-router';
import Button from 'mineral-ui/Button';
import Popover from 'mineral-ui/Popover';
import Add from 'mineral-ui-icons/IconAdd';
import Delete from 'mineral-ui-icons/IconDelete';
import _ from 'lodash';

export class GenerateMethods extends Component{
    constructor(props){
        super(props);
        this.state = {
            rows: []
        }
    }

    render(){
        let content = [];
        const iconDelete = <Delete />;    
            this.props.uniqueMethods.map((d, i) => {
                let id = `#${d.id}`;
                let elements = <div className="panel list-group">
                    <a href="#" className="list-group-item default" data-toggle="collapse" data-target={id} data-parent="#menu">
                        <b>{d.method}</b> <span className="label label-info">5</span><span className="pull-right" onClick={() => this.props.handleDelete(d.id, d.method)} title="Remove this entry"><Delete /></span>
                    </a>
                    <div id={id} className="sublinks collapse">
                        <div className="list-group-item">
                            TEST4
                        </div>
                        <div className="list-group-item">
                            TEST5
                        </div>
                        <div className="list-group-item">
                            TEST6
                        </div>
                    </div>

                </div>


                content.push(elements)
            });
        return(
            <div id="menu">
                {content}
            </div>
        )
    }
}

版本：

“ bootstrap”：“ ^ 3.3.6”，“ jquery”：“ ^ 2.2.3”，

App.js

import 'bootstrap/dist/css/bootstrap.css';
import 'jquery';
import 'bootstrap/dist/js/bootstrap';

的index.html

<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    </head>

    <body>
        <div id="App">
            <!-- this is where the root react component will get rendered -->
        </div>
    </body>
</html>

Answer 1

React在虛擬DOM上工作，而jquery直接在DOM上工作。我建議您使用react-bootstrap軟件包，該軟件包用於不使用jquery的React。

但是，如果要在cdn的引導程序，則還可以將引導程序依賴項作為cdn包含在index.html中，或者將引導程序依賴項存儲為local files在公用文件夾中，還可以從npm卸載引導程序依賴項。

Bootstrap手風琴在單擊時未擴展

問題描述

1 個解決方案

解決方案1
1 2018-08-13 06:43:13

Bootstrap手風琴在單擊時未擴展

問題描述

1 個解決方案

解決方案1 1 2018-08-13 06:43:13

解決方案1
1 2018-08-13 06:43:13