React-Bootstrap 网格内容不显示

Question

我在 react-bootstrap Jumbotron 中创建了一个网格，但是当我将它导出到我的 app.jsx none 时，显示了网格内容（但是 Jumbotron 和我的自定义样式是）

我的所有其他组件都工作正常，所以我不确定为什么不行。

App.js:

import React, { Component } from 'react';
import {Grid} from 'react-bootstrap';
import {Row} from 'react-bootstrap';
import {Col} from 'react-bootstrap';
import MyNavbar from './modules/MyNavbar.jsx';
import SectionOne from './modules/SectionOne.jsx'
import SectionTwo from './modules/SectionTwo.jsx'
import SectionThree from './modules/SectionThree.jsx';

class App extends Component {
    render() {
        return (
            <div className="App">
                <MyNavbar/>
                <SectionOne/>
                <SectionTwo/>
                <SectionThree/>
            </div>
        );
    }
}

export default App;

SectionThree.jsx:

import React, { Component } from 'react';
import {Jumbotron} from 'react-bootstrap';
import howItWorks from './howItWorks.jsx';

class SectionThree extends Component {
    render() {
        return(
            <Jumbotron id="jumbotronThree">
                <howItWorks/>
            </Jumbotron>
        )
    }
}

export default SectionThree;

howItWorks.jsx:

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

class howItWorks extends Component {
    render() {
        return(
            <div>
                <Grid fluid>
                    <Row>
                        <Col md={4}>
                            <div className="searchIcon">
                                <Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
                            </div>
                        </Col>
                        <Col md={4}>
                            <div className="payIcon">
                                <Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
                            </div>
                        </Col>
                        <Col md={4}>
                            <div className="eatIcon">
                                <Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
                            </div>
                        </Col>
                    </Row>
                    <Row>
                        <Col md={4}>
                            <p>
                                test
                            </p>
                        </Col>
                        <Col md={4}>
                            <p>
                                test
                            </p>
                        </Col>
                        <Col md={4}>
                            <p>
                                test
                            </p>
                        </Col>
                    </Row>
                </Grid>
            </div>
        )
    }
}

export default howItWorks;

Answer 1

React 组件应始终以大写字母开头：

class HowItWorks extends Component {
  render() {
  ...

<Jumbotron id="jumbotronThree">
  <HowItWorks/>
  ...

Whosebug 上有一个很好的答案涵盖了这个。

Answer 2

组件网格现在作为容器调用。在 react js 代码中键入 Container 而不是 Grid。

React-Bootstrap 网格内容不显示

React-Bootstrap grid contents not displaying

javascript

twitter-bootstrap

reactjs

react-bootstrap