Question

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

我将CDN链接添加到index.html。

我不能使用某些特定的标签，我不确定这些标签是否包含在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？我如何使用所有引导程序功能？

Answer 1

将您呈现DOM的html页面链接到像

这样的引导程序文件

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

并且您可以在每个组件中使用引导类，这些组件在DOM中呈现。

Answer 2

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

从'react-bootstrap'导入{Row，Col};

Answer 3

如果你已经为bootstrap安装了一个软件包，你可能应该在你需要的页面中导入它

如果你安装了一个名为'react-bootstrap'的包，下面将是它的import语句

import * as BootstrapComponents from 'react-bootstrap'

您可以使用*导入所有内容，或者您只能从中获取所需的组件，如

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

Answer 4

看起来反应无法从react-bootstrap模块中找到元素。

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

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

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

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

Answer 5

首先，您需要安装引导程序包以下命令： npm install --save react-bootstrap bootstrap @ 3 在src / index.js文件的开头导入Bootstrap CSS和可选的Bootstrap主题CSS：

导入'bootstrap / dist / css / bootstrap.css'; 导入'bootstrap / dist / css / bootstrap-theme.css'; 如果需要react-bootstrap组件，则需要在src / App.js文件中导入：从'react-bootstrap'导入{Navbar，Jumbotron，Button};

之后，如果需要使用react-bootstrap软件包，则需要以下命令： npm install --save react-bootstrap

完成下载后，则需要导入此行src / index.js文件。导入'react-bootstrap / dist / react-bootstrap';

如果需要网格和列，只需使用此链接即可：从'react-bootstrap'导入{Grid，Row，Col，};

Answer 6

请注意，修改DOM的引导程序库完成的javascript内容与React的虚拟DOM冲突。

我的建议是使用支持bootstrap v4的reactstrap或支持bootstrap v3的React-Bootstrap。我试过两个（从React-Bootstrap开始，因为它更受欢迎）并且更喜欢reactstrap。

如何在react.js中使用bootstrap？

6 个答案: