react-bootstrap模塊沒有匯出成員-有解無憂

我想在我的布局組件中使用 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 的新手，感謝您的支持！

uj5u.com熱心網友回復：

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;

您可以查看此沙箱以獲取實時作業示例。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/349747.html

標籤：反应打字稿新产品经理反应引导

上一篇：脈聊社交網站原始碼類似微博的社交原始碼模板UI非常漂亮自適應手機版重點是有原生APP

下一篇：如何在我的React應用程式中修復此語法錯誤？