javascript - 通过 ReactDOM 渲染多个组件-6ren

javascript - 通过 ReactDOM 渲染多个组件

转载作者：行者123 更新时间：2023-11-30 11:43:47

25

4

目前无法弄清楚为什么我的代码没有呈现。会喜欢你们中一些杰出的 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>
        );
    }
}

页脚.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>
        );
    }
}

索引.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>

网络包配置

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;

非常感谢任何帮助!

最佳答案

一切看起来都正常，除了这个:

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

因为你想呈现多个元素，将它们包装在一个 div 中它会起作用。试试这个:

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

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

关于javascript - 通过 ReactDOM 渲染多个组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41690545/

25

4

0

文章推荐： javascript - Div onclick e.target.id 不工作

文章推荐： java - 在捕获异常时继续java代码

android - × 组件 tns-core-modules 未安装。 × 组件 tns-android 未安装。 × 组件 tns-ios 未安装
我错过了什么，我已完成的安装指南中要求的所有步骤 native 脚本运行 tns doctor 给我以下输出... C:\abc\xyz>tns doctor √ Getting environm
reactjs - 将数据从一个路由器(组件)传递到另一个路由器(组件)
尝试从 {addToCart(book)}}/>}> 传递数据至}> 问题: 购物车 ( render={()=> ) 收到 null，但没有收到我尝试发送的对象已放置“console.log...
javascript - “组件”不能用作 JSX 组件。下一页
这是 _app.tsx 的外观: function MyApp({ Component, pageProps }: AppProps) { return } 我在构建项目时遇到了这个错误: Ty
javascript - Vue 组件 - 如何避免改变 Prop (Laravel 组件)
我的 Laravel Vue 组件收到以下警告: [Vue warn]: Avoid mutating a prop directly since the value will be overwrit
java - JTabbedPane - addTab(标题，图标，组件)+ setTabComponentAt(索引，组件)
根据这个example更详细this one我刚刚遇到了一件奇怪的事情...... 如果我使用方法作为 addTab(title,icon,component) 并且下一步想使用 setTabComp
mysql - 我试图了解如何使用 TFDStoredProc(FireDac 组件)填充 TIWDBGrid(IntraWeb 组件)
目前我有一个捕获登录数据的表单，一个带有 TIWDBGrid 的表单，它应该返回与我从我的 mysql 数据库登录时创建的 user_id 关联的任何主机，以及一个共享数据模块。下面是我的登录页面代
javascript - 在原生 Android View 中渲染 React-Native 组件(UI 组件)
在我的react-native应用程序中，我目前有一个本地Android View (用java编写)正确渲染。当我尝试将我的react-native javascript 组件之一放入其中时，出现以
javascript - React JS 没有编译 Bootstrap 组件。只返回 HTML 组件。 0xerr011d
我为作业编写了简单的代码。我引用了文档和几个 youtube 视频教程系列。我的 react 代码是正确的我在运行代码时没有收到任何错误。但是这些 react-boostrap 元素没有渲染。此代码仅
reactjs - Flow React : Cannot create element because React. 组件 [1] 不是 React 组件
几周前我刚刚开始使用 Flow，从一周前开始我就遇到了 Flow 错误，我不知道如何修复。代码如下: // @flow import React, { Component } from "react
web2py 组件
我想在同一个 View 中加载不同的 web2py 组件，但不是同时加载。我有 5 个 .load 文件，它们具有用于不同场景的表单字段，这些文件由 onchange 选择脚本动态调用。 web2py
Unity3d 组件
关闭。这个问题是opinion-based .它目前不接受答案。想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 6年前关闭。 Improve t
用于过滤击键的 Blazor 组件
Blazor 有 InputNumber将输入限制为数字的组件。然而，这呈现了一个 firefox 不尊重(它允许任何文本)。所以我尝试创建一个过滤输入的自定义组件: @inherits Inpu
dart - AngularDART 组件
我在学习 AngularDART 组件时编写了以下简单代码，但没有显示任何内容，任何人都可以帮助我知道我犯了什么错误: 我的 html 主文件:
html - CSSTransition 组件
我想在初始安装组件时或之后为 div 设置动画(淡入)。动画完成后，div 不应消失。我正在尝试使用 CSSTransition 组件并查看 reactcommunity.org 上的示例，但我根本无
甘特图的 JSF 组件
我需要一个 JSF 组件来表示甘特图。是否有任何组件库(如 RichFaces)包含这样的组件？最佳答案 JFreeChart有甘特图和PrimeFaces有一个图像组件，允许您动态地流式传输内容。
architecture - 组件、模块和子系统
从软件工程的角度来看，组件、模块和子系统之间有什么区别？提前致谢! 最佳答案以下是 UML 2.5 的一些发现: 组件:该子句指定一组结构，可用于定义任意大小和复杂性的软件系统。特别是，它将组件指
用于免注册激活的 COM 组件
我有使用非托管程序集(名为 unmanaged.dll)的托管应用程序(名为 managed.exe)。到目前为止，我们已经创建了 Interop.unmanaged.dll，managed.exe
WCF DAL 组件
我有一个跨多个应用程序复制的 DAL(我知道它的设计很糟糕，但现在忽略它)，我想做的是这个...... 创建一个将通过所有桌面应用程序访问的 WCF DAL 组件。任何人都可以分享他们对关注的想法吗？
Scala Swing 组件
我有一个 ComboBox 的集合声明如下。 val cmbAll = for (i /** action here **/ } 所有这些都放在一个 TabbedPane 中。我想这不是问题。那么我
printing - 打印特定区域(组件)
使用 VB6 创建一个 VB 应用程序。应用程序的一部分显示内部的闪存。当我使用 printform它只是打印整个应用程序。我不知道如何单独打印闪光部分。任何帮助，将不胜感激!.. 谢谢。最佳答案

首页

博学

6Ren·AI

商城

javascript - 通过 ReactDOM 渲染多个组件