Bootstrap手风琴在单击时未扩展

时间:2018-08-13 06:13:48

标签: javascript jquery reactjs bootstrap-4

单击时引导手风琴没有展开。我已经使用npm作为本地依赖项安装了bootstrap和jquery,并且都将其导入了根组件(即App.js)中,但是由于某种原因,似乎没有检测到jquery。如果我做错了,请纠正我。

GenerateMethods组件:

display: inline-block;

版本:

  

“ bootstrap”:“ ^ 3.3.6”,“ jquery”:“ ^ 2.2.3”,

App.js

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>
        )
    }
}

index.html

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

1 个答案:

答案 0 :(得分:1)

React可以在虚拟DOM上工作,而jquery可以直接在DOM上工作。我建议您使用react-bootstrap软件包,该软件包用于在不使用jquery的情况下进行响应。

但是,如果您想在react中使用带有jquery的引导程序,则还可以将引导程序依赖项作为cdn包括在index.html中,或者将引导程序依赖性作为local files存储在公用文件夹中。从npm卸载引导程序依赖项。