Question

原谅初学者级别的问题 - 我很反应。我正在使用reacts bootstrap，我正在尝试渲染一个轮播组件。所有的引导程序组件都有“ReactDOM.render（component，mountNode）;”，如果我理解正确，则呈现给具有指定id的div。但是，我仍然不太确定应该如何返回并渲染我的组件。例如，我添加了一个导航栏：

import React from 'react';
import ReactDOM from 'react-dom';
import {Navbar, MenuItem, NavDropdown, NavItem, Nav} from 'react-bootstrap';

const navbarInstance = (
  <Navbar inverse collapseOnSelect>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="http://localhost:3000/">test app</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
          <MenuItem eventKey={3.1}>Action</MenuItem>
          <MenuItem eventKey={3.2}>Another action</MenuItem>
          <MenuItem eventKey={3.3}>Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.3}>Separated link</MenuItem>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
    </Navbar>
  );


ReactDOM.render(navbarInstance, document.getElementById("foo"));

如果我在index.html中指定id =“foo”的div，则此方法有效。但是，当我为carousel实例执行相同操作时，它不起作用：

import React from 'react';
import ReactDOM from 'react-dom';
import {Carousel} from 'react-bootstrap';

const carouselInstance = (
  <Carousel>
    <Carousel.Item>
      <img width={900} height={500} alt="900x500" src="/assets/carousel.png"/>
      <Carousel.Caption>
        <h3>First slide label</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
      <img width={900} height={500} alt="900x500" src="/assets/carousel.png"/>
      <Carousel.Caption>
        <h3>Second slide label</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
      <img width={900} height={500} alt="900x500" src="/assets/carousel.png"/>
      <Carousel.Caption>
        <h3>Third slide label</h3>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </Carousel.Caption>
    </Carousel.Item>
  </Carousel>
);

ReactDOM.render(carouselInstance, document.getElementById("foo2"));

我的问题分为两部分：为什么将它放入index.html的相同方法不适用于轮播？还有一种更好的方法是我应该将这些组件渲染到App.js中，因为它感觉好像我打破了反应惯例。

在React.js中渲染错误

0 个答案: