使用ReactDOM渲染多个组件

Question

使用ReactDOM渲染多个组件

3

目前无法确定为什么我的代码没有渲染。希望一些聪明的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;

非常感谢您的帮助！

- LeCoda

什么是错误？ - StateLess

没有给出 - 只是在浏览器中不显示 - LeCoda

请注意，React 不会在浏览器上显示任何错误，而是在控制台上显示。 - Eldelshell

嗯，我的Node.js命令提示符没有错误。在哪里检查控制台？ - LeCoda

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mayank Shukla · Accepted Answer

除了这个之外，一切看起来都很正常：

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

由于您想要呈现多个元素，请将它们包装在一个 div 中，这样就可以正常工作了。请尝试以下内容：

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

请查看 jsfiddle： https://jsfiddle.net/4m3m7653/