Javascript 单击时引导手风琴未展开_Javascript_Jquery_Reactjs_Bootstrap 4

Javascript 单击时引导手风琴未展开

javascript jquery reactjs bootstrap-4

Javascript 单击时引导手风琴未展开,javascript,jquery,reactjs,bootstrap-4,Javascript,Jquery,Reactjs,Bootstrap 4,单击时引导手风琴未展开。我使用npm作为本地依赖项安装了bootstrap和jquery，并在根组件App.js中导入了这两个组件，但由于某些原因，jquery似乎没有被检测到。如果我做错了什么，请纠正我 GenerateMethods组件： import React, { Component } from 'react'; import { browserHistory, Link } from 'react-router'; import Button from 'mineral-ui/Bu

单击时引导手风琴未展开。我使用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>
        )
    }
}

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>

React在虚拟DOM上工作，而jquery直接在DOM上工作。我建议您使用用于React的包，而不使用jquery

但是,，如果要在react中将引导与jquery一起使用，则还可以在index.html中将引导依赖项作为

cdn

包含，或将引导依赖项作为

本地文件存储在公用文件夹中。还可以从npm卸载引导依赖项。
关于integrationg react with DOM的更多信息可能重复库（如jQuery）可以读取。作为一种解决方法，您可以在代码中使用窗口。$
而不是$
（不推荐）。也请阅读。为什么你认为bootstrap.js
需要jquery.js
，Hemadri？或者，更确切地说，您认为引导崩溃是如何工作的？这是一个$（'.collapse'）.collapse（）调用。只是Bootstrap为您提供了它，您不必自己初始化它们（您只需使用类）。如果您想使用Bootstrap，请使用react Bootstrap，它将组件“react”-化。您不应该指望添加jQuery+jQuery依赖库就能简单地工作。感谢@AndreiGheorghiuOk，我删除了引导和jQuery，并安装了react引导。那么，这是否也支持我已经在我的组件中使用的引导类，或者如果react引导不支持引导css类名，我是否也需要引导库？react引导有自己的内置react组件，并由其定义的道具控制。您不需要声明任何类。您不需要外部引导当与react-bootstrap.Karthik一起使用时，我的问题是我在许多组件中都有引导类。那么，如果我删除引导并安装react-bootstrap，这会起作用吗？好的，它不起作用。如果您已经在许多组件中使用引导，那么不要安装react-bootstrap。只需在index.html中添加jquery和popper.min.js。这样就不会有任何问题。
<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>