react-bootstrap 模块没有导出成员

Posted 2023-03-13

【中文标题】react-bootstrap 模块没有导出成员

【英文标题】：react-bootstrap module has no exported members

【发布时间】：2021-12-19 15:52:11

【问题描述】：

我想在我的布局组件中使用 npm 模块 react-bootstrap (https://www.npmjs.com/package/@types/react-bootstrap)（ASP.NET Core 2.1 模板客户端项目也有）。但是模板中的文件扩展名是.js。我想使用 Typescript，所以 Layout.tsx 看起来像这样：

import * as React from 'react';
import  Col, Grid, Row  from 'react-bootstrap/';           <----- compile time error: Module has no exported member col / grid / row
import NavMenu from './NavMenu';

interface Layout 
    children: any;


const Layout = ( children ) => 
    return (<Grid fluid>
        <Row>
            <Col sm=3>
                <NavMenu/>
            </Col>
            <Col sm=9>
                this.props.children
            </Col>
        </Row>
    </Grid>);

export default Layout;

我的 package.json 文件如下所示：

  "name": "MyApp",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@stitches/react": "^1.2.5",
    "@types/react-bootstrap": "^0.32.28",
    "@types/react-dom": "^17.0.11",
    "@types/react-router": "^5.1.17",
    "@types/react-router-bootstrap": "^0.24.5",
    "bootstrap": "^3.4.1",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-bootstrap": "^2.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.0.0",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "rimraf": "^2.6.2"
  ,
  "scripts": 
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  ,
  "devDependencies": 
    "@types/react": "^17.0.34",
    "css-loader": "^6.5.1",
    "style-loader": "^3.3.1"
  

我还在 index.tsx 中导入了“bootstrap/dist/css/bootstrap.css”和“bootstrap/dist/css/bootstrap-theme.css”。

更多信息：

ECMAScript 版本：ECMAScript 2017 TSX 文件中的 JSX 编译：React 模块系统：ES2015

有人知道问题出在哪里吗？我是 React 新手，感谢您的支持！

【参考方案1】：

react-bootstrap 没有Grid 组件，而是有Container 组件。除此之外，您不应在功能组件中使用this.props.children。所以，你的代码应该是这样的：

import React from 'react';
import Col from "react-bootstrap/Col";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import NavMenu from './NavMenu';

interface Layout 
    children: any;


const Layout = ( children ) => 
    return (<Container fluid>
        <Row>
            <Col sm=3>
                <NavMenu/>
            </Col>
            <Col sm=9>
                children
            </Col>
        </Row>
    </Container>);

export default Layout;

您可以查看this sandbox 以获取实时工作示例。