文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在react.js中使用bootstrap？

问如何在react.js中使用bootstrap？
EN

Stack Overflow用户

提问于 2018-03-05 14:09:22

回答 6查看 9K关注 0票数 2

我使用npm在/node_modules/bootstrap下下载了bootstrap依赖项。

我在index.html中添加了CDN链接。

我不能使用某些特定的标签，我不确定这些标签是否包含在bootstrap中。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

当我尝试将一些样式添加到我的应用程序中时，它变成了exeption。

./src/App.js
  Line 16:  'Grid' is not defined  react/jsx-no-undef
  Line 17:  'Row' is not defined   react/jsx-no-undef
  Line 18:  'Col' is not defined   react/jsx-no-undef
  Line 21:  'Col' is not defined   react/jsx-no-undef
  Line 26:  'Row' is not defined   react/jsx-no-undef
  Line 27:  'Col' is not defined   react/jsx-no-undef
  Line 30:  'Col' is not defined   react/jsx-no-undef
  Line 33:  'Col' is not defined   react/jsx-no-undef
  Line 38:  'Row' is not defined   react/jsx-no-undef
  Line 39:  'Col' is not defined   react/jsx-no-undef
  Line 44:  'Row' is not defined   react/jsx-no-undef
  Line 45:  'Col' is not defined   react/jsx-no-undef
  Line 48:  'Col' is not defined   react/jsx-no-undef

Search for the keywords to learn more about each error.

这是我的app.js文件。

import React, { Component } from 'react';

class App extends Component {
render(){
    return (
        <Grid>
        <Row className="show-grid">
            <Col xs={12} md={8}>
                <code>&lt;{'Col xs={12} md={8}'} /&gt;</code>
            </Col>
            <Col xs={6} md={4}>
                <code>&lt;{'Col xs={6} md={4}'} /&gt;</code>
            </Col>
        </Row>

        <Row className="show-grid">
            <Col xs={6} md={4}>
                <code>&lt;{'Col xs={6} md={4}'} /&gt;</code>
            </Col>
            <Col xs={6} md={4}>
                <code>&lt;{'Col xs={6} md={4}'} /&gt;</code>
            </Col>
            <Col xsHidden md={4}>
                <code>&lt;{'Col xsHidden md={4}'} /&gt;</code>
            </Col>
        </Row>

        <Row className="show-grid">
            <Col xs={6} xsOffset={6}>
                <code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code>
            </Col>
        </Row>

        <Row className="show-grid">
            <Col md={6} mdPush={6}>
                <code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code>
            </Col>
            <Col md={6} mdPull={6}>
                <code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code>
            </Col>
        </Row>
    </Grid>
)
}
}

export default App;

为什么grid、row和col是undef？如何使用所有引导功能？

reactjs

npm

bootstrap-4

回答 6

Stack Overflow用户

发布于 2018-03-05 17:42:23

看起来react找不到react-bootstrap模块中的元素。

如果您尚未安装react-bootstrap，请使用以下命令进行安装。

npm install --save react react-dom
npm install --save react-bootstrap

然后将所需的组件导入到您的页面，如下所示。

import { Grid, Row, Col } from 'react-bootstrap';

票数 4

Stack Overflow用户

发布于 2018-03-05 14:35:58

将呈现DOM的html页面链接到引导程序文件，如下所示

<link rel="stylesheet" href="/components/css/bootstrap.min.css">

您可以在该DOM内部呈现的每个组件中使用引导程序类。

票数 3

Stack Overflow用户

发布于 2020-04-28 03:10:14

在app.js或index.js中导入此行导入'bootstrap/dist/css/bootstrap.min.css'；

从‘react-bootstrap’导入{ Row，Col }；

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49104438

复制

相似问题

问如何在react.js中使用bootstrap？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react.js中使用bootstrap？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react.js中使用bootstrap？
EN