twitter-bootstrap – React-Bootstrap – 导入模块

发布时间：2020-12-17 20:40:10 所属栏目：安全来源：网络整理

导读：我正在尝试使用react-bootstrap.请参阅下面的代码.如果我加载单个模块(例如Button,ButtonGroup等),它可以正常工作.但是,我宁愿导入整个ReactBootstrap(如下面的第2行所示)但是,它不会识别像.我该怎么做？ import React from 'react';import ReactBootstrap f

我正在尝试使用react-bootstrap.请参阅下面的代码.如果我加载单个模块(例如Button,ButtonGroup等),它可以正常工作.但是,我宁愿导入整个ReactBootstrap(如下面的第2行所示)但是,它不会识别像.我该怎么做？

import React from 'react';
import ReactBootstrap from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import { ButtonGroup } from 'react-bootstrap';
import { DropdownButton } from 'react-bootstrap';
import { MenuItem } from 'react-bootstrap';

const NavBar = (props) => {

    return (
        <div>
            <Button bsStyle="success" bsSize="small">
                Something
            </Button>
            <ButtonGroup>
                <DropdownButton bsStyle="success" title="Dropdown">
                    <MenuItem key="1">Dropdown link</MenuItem>
                    <MenuItem key="2">Dropdown link</MenuItem>
                </DropdownButton>
                <Button bsStyle="info">Middle</Button>
                <Button bsStyle="info">Right</Button>
            </ButtonGroup>
        </div>
    )

}

export default NavBar;

谢谢

解决方法

react-bootstrap没有默认导出,因此在这种情况下不能使用默认导入语法(从’react-bootstrap’导入ReactBootstrap).您可以执行以下操作：

import * as ReactBootstrap from 'react-bootstrap';

<ReactBootstrap.Button bsStyle="success" bsSize="small">
  Something
</ReactBootstrap.Button>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!