Question

我在react-bootstrap Jumbotron中创建了一个网格，但当我将它导出到我的app.jsx时，没有显示任何网格内容（但是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组件应始终以大写字母开头：

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "MakeID,AutoMake,Active")] code_AutoMake code_AutoMake)
    {

            if (ModelState.IsValid)
            {
                db.code_AutoMake.Add(code_AutoMake);
                db.SaveChanges();
                return PartialView("~/Views/PartialViews/_AutoMakeCreate.cshtml");
            }


        return RedirectToAction("EditDDL", "tblNewAutos");
    }

stackoverflow here有一个很好的答案，涵盖了这一点。

Answer 2

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

React-Bootstrap网格内容未显示

2 个答案: