Question

目前无法弄清楚为什么我的代码无法呈现。会喜欢你们中的一些聪明的react.js编码员的一些建议。真的不明白什么是错的 - 我觉得它应该有用。

这是我的App.js

import React from 'react';
import ReactDOM from 'react-dom'


import HeaderNavigation from './HeaderNavigation';
import Body from './Body';
import Footer from './Footer';




ReactDOM.render(
    <HeaderNavigation/>,
    <Body/>,
    <Footer/>,
     document.getElementById('app'));

这是组件。

Body.js

import React from "react";

/* Styles */
import Button from 'react-bootstrap/lib/Button';
import Grid from 'react-bootstrap/lib/Grid';
import Jumbotron from 'react-bootstrap/lib/Jumbotron';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';

export default class Body extends React.Component {
    render() {
        return (
            <div>
                <Jumbotron>
                    <Grid>
                        <h1>Mr Mac</h1>
                        <p>Poodle Box</p>
                    </Grid>
                </Jumbotron>

                <Grid>
                    <Row>
                        <Col md={4}>
                            <h2>Luxurious Dog Clothes</h2>
                            <p>So luxury much now</p>
                            <p><Button>View details »</Button></p>
                        </Col>
                        <Col md={4}>
                            <h2>Delectable Dog Délectants</h2>
                            <p>Food</p>
                            <p><Button>View details »</Button></p>
                        </Col>
                        <Col md={4}>
                            <h2>Toys</h2>
                            <p>MMmhmmmm</p>
                            <p><Button>View details</Button></p>
                        </Col>
                    </Row>
                </Grid>
            </div>
        );
    }
}

Footer.js

import React from 'react';
import Grid from 'react-bootstrap/lib/Grid';

export default class Footer extends React.Component {
    render() {
        return (
            <Grid>
                <hr />
                <footer>
                    <p>© Company 2014</p>
                </footer>
            </Grid>
        );
    }
}

HeaderNavigation.js

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';

export default class HeaderNavigation extends React.Component {

render() {
        let brand = <a href='#'>Project Name</a>;
        return (
            <Navbar brand={brand} fixedTop inverse toggleNavKey={0}>
                <Nav right eventKey={0}>
                    <InlineLogin className='navbar-form' />
                </Nav>
            </Navbar>
        );
    }
}

的index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <title>DOGBOXUNITED</title>
    <span id = 'Heading'> </span>
</head>

<body>
<div id='app'> </div>
<script src="output/myCode.js"></script>
</body>

</html>

Webpack配置

var webpack = require("webpack");
var path = require("path");

var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");

var config = {
    entry: DEV + "/App.js",
    output: {
        path: OUTPUT,
        filename: "myCode.js"
    },
module: {
    loaders: [{
        include: DEV,
        loader: "babel",
    }]
  }
};

module.exports = config;

非常感谢任何帮助！

Answer 1

除此之外，一切看起来都很合适：

ReactDOM.render(
    <HeaderNavigation/>,
    <Body/>,
    <Footer/>,
     document.getElementById('app')
);

由于您想渲染多个元素，请将它们包装在div中，它将起作用。试试这个：

ReactDOM.render(
    <div>
       <HeaderNavigation/>
       <Body/>
       <Footer/>
    </div>,
    document.getElementById('app')
);

检查jsfiddle：https://jsfiddle.net/4m3m7653/

通过ReactDOM渲染多个组件

1 个答案: