reactjs - ماژول react-bootstrap هیچ عضو صادر شدهای ندارد

من میخواهم از ماژول npm react-bootstrap (https://www.npmjs.com/package/@types/react-bootstrap) در کامپوننت Layout خود استفاده کنم (همانطور که پروژه کلاینت قالب ASP.NET Core 2.1 هم دارد). اما پسوند فایل در قالب .js است. من میخواهم از تایپاسکریپت استفاده کنم، بنابراین 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"
  }
}

من همچنین 'bootstrap/dist/css/bootstrap.css' و 'bootstrap/dist/css/bootstrap-theme.css' را در index.tsx وارد کردهام.

اطلاعات بیشتر:

• نسخه ECMAScript: ECMAScript 2017
• کامپایل JSX در فایلهای TSX: ریاکت
• سیستم ماژول: ES2015

آیا کسی میداند مشکل ممکن است کجا باشد؟ من تازه با React آشنا شدهام، پس از حمایت شما ممنونم!

پاسخ شماره ۱

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;

میتوانید به این سندباکس نگاهی بیندازید تا یک مثال عملی زنده را ببینید.