将依赖项从 index.html 重定位到 package.json

Question

我想删除我的

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

从我的 index.html 文件中与 bootstrap 相关的依赖项并通过 npm 安装在 package.json 文件中实现它们。

我安装了它们并删除了那些链接但现在引导技能无法识别，按钮和其他按钮也不起作用。

有一个例子更好理解→

    class NavbarToBeConnected extends React.Component {
        componentWillUnmount() {
            this.setState = (state, callback) => {
              return;
            };
        }
    
        render() {
    
            return (
                <React.Fragment>
                    <div hidden={this.props.isDrawModeActivated} className="pos-f-t custom-navbar">
                        <nav className={`navbar ${STYLE_LAYERS[this.props.selectedStyleLayerId].ICON_NB_COLOR_CLASS}`}>
                            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                                <span className="navbar-toggler-icon"></span>
                            </button>
                        </nav>
                        <div className="collapse" id="navbarToggleExternalContent">
                            <div className="bg-dark p-4 adjust-width adjust-height" style={{height: 'auto', minHeight:520, maxHeight: 600, overflowX: 'hidden', scrollbarWidth: 'thin'}}>
                                <NavbarButton1
                                mapboxRef={this.props.mapboxRef}
                                />
                                <NavbarButton2
                                mapboxRef={this.props.mapboxRef}
                                />
                                <NavbarButton3
                                isDropzoneSet = {this.props.isDropzoneSet}
                                dropzoneOpen = {this.props.dropzoneOpen}
                                />
                                <NavbarButton4
                                mapboxRef={this.props.mapboxRef}
                                />
                                <Accordion 
                                mapboxRef={this.props.mapboxRef}
                                />
                            </div>
                        </div>
    
                    </div>
                    <Modal1
                    mapboxRef={this.props.mapboxRef}
                    />
                    <Modal2
                    mapboxRef={this.props.mapboxRef}
                    />
                    <Modal3
                    mapboxRef={this.props.mapboxRef}
                    />
                    <Modal4
                    mapboxRef={this.props.mapboxRef}
                    />
                </React.Fragment>
            )
    
        }
    }

即使我添加了导入；

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

导航栏按钮不起作用。

我该怎么办，将index.html的依赖项作为包携带到package.json的方式是什么。 ??

Answer 1

尝试在您应用的root component 处导入这些内容：

运行

npm i jquery
npm i bootstrap

然后在根组件中导入它们：

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';