标签: react-bootstrap

我正在努力学习反应.放手一搏,我正在尝试使用react-bootstrap并尝试使用react-bootstrap手风琴来实现手风琴.首先我尝试使用ButtonToolBar,它工作正常.

var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var Button = ReactBootstrap.Button;
var buttonsInstance = (
    <ButtonToolbar>
      <Button>Submit</Button>
      <Button>Cancel</Button>
    </ButtonToolbar>
);

React.renderComponent(
    buttonsInstance,
    document.getElementById('app')
);

但是,react-bootstrap的手风琴代码无效.它显示的内容,但不像我们手风琴的情况.这是代码:

var Accordion = ReactBootstrap.Accordion;
var Panel = ReactBootstrap.Panel;

var accordionInstance = (
    <Accordion>
      <Panel header="Collapsible Group Item #1" key={1}>
        Content1
      </Panel>
      <Panel header="Collapsible Group Item #2" key={2}>
        Content2
      </Panel>
      <Panel header="Collapsible Group Item #3" key={3}>
        Content3
      </Panel>
    </Accordion>
);

React.renderComponent(
    accordionInstance,
    document.getElementById('app')
);

我也尝试过使用,它也表现得一样.我从这里接受了帮助.

有一个类似的问题在这里.但是,在我的情况下,如果没有自定义ReactBootstrp.Panel,我就无法使用它.

任何想法,我怎样才能让它发挥作用？

我正在尝试使用Jasmine对React Bootstrap模式对话框进行单元测试.但它没有按预期工作.

这里是jsfiddle链接使用最新版本的React,React Bootstrap,Jasmine.:http://jsfiddle.net/30qmcLyf/3/

测试失败:

第27-28行

// This test fails. Find DOM Node.
var instanceDomNode = ReactDOM.findDOMNode(instance);
expect(instanceDomNode).not.toBe(null);

第39-40行

//This test fails. Find modal header.
var headerComponents = TestUtils.scryRenderedComponentsWithType(component, ReactBootstrap.Modal.Header);
expect(headerComponents.length).not.toBe(0);

第35-36行还有什么问题.如果我取消注释行,我会在注释中显示错误.

// Error: Did not find exactly one match for componentType:function ModalHeader()...
//var headerComponent = TestUtils.findRenderedComponentWithType(component, ReactBootstrap.Modal.Header);
//expect(headerComponent).not.toBe(null);

根据测试实用程序(链接)的最新官方文档,您应该将ReactComponent作为第一个参数传递.

谁能告诉我有什么问题？

我正在使用表单控件组件通过AJAX调用将图像传递给API端点.到目前为止,我无法找到有关如何实际定位实际文件数据的信息.

我正在使用react-bootstrapNPM包来使我的React组件看起来正常.我需要自定义其中一些,所以我遵循官方的React-Bootstrap文档,但代码抛出了错误index.jsx:5 Uncaught TypeError: Cannot read property 'addStyle' of undefined.

这是我的自定义Button组件代码:

import React from "react";
import Button from 'react-bootstrap/lib/Button';
import bootstrapUtils from 'react-bootstrap/lib/utils/bootstrapUtils';

bootstrapUtils.addStyle(Button, 'custom');

export default class MediaItemButton extends React.Component {
    render() {

        return (
            <div>
                <style type="text/css">{`
                .btn-custom {
                    background-color: purple;
                    color: white;
                }
                `}</style>
                <Button bsStyle="primary">Custom</Button>
            </div>
        );
    }
}

我正在使用 react-bootstrap 和 ReactJS。我期待选择将选项作为参数，但没有看到填充选项的方法。这是我迄今为止的代码。我如何传入数据

render() {

    return (
        <div>
            <Button bsStyle="primary" onClick={this.open}>Add Parameter</Button>
            <Modal show={this.state.showModal} onHide={this.close}>
                <Modal.Header>
                    <Modal.Title>Add / Edit Parameter</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <form>
                        <FormGroup controlId="parameterType">
                            <ControlLabel>Type</ControlLabel>
                            <FormControl componentClass="select" placeholder="Type">
                                <option value="select">select</option>
                                <option value="other">...</option>
                            </FormControl>
                        </FormGroup>
                    </form>
                </Modal.Body>
                <Modal.Footer>
                    <Button bsStyle="primary" onClick={this.close}>Save Changes</Button>
                </Modal.Footer>
            </Modal>
        </div>
    )
}

这是我的超级基本react组件，它使用来渲染导航栏react-bootstrap：

import React, { Component } from "react";
import { Nav, NavItem, Navbar, Grid } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";

export default function Header() {
  return (
    <Navbar collapseOnSelect>
      <Navbar.Header className="mr-auto">
        <Navbar.Brand>
          <LinkContainer to="/">
            <a>User Management via Redis</a>
          </LinkContainer>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Nav pullRight>
        <LinkContainer exact to="/">
          <NavItem>Search</NavItem>
        </LinkContainer>
        <LinkContainer to="/users">
          <NavItem>All Users</NavItem>
        </LinkContainer>
      </Nav>
    </Navbar>
  );
}

我希望导航链接正确浮动，但不幸的是，在跟随react-bootstrap文档并向pullRightNav元素添加prop时，正确的浮动导航就会溢出。

我可以通过给右浮动的导航设置一个ID和一个-30px的左边距来轻松解决问题，但是我不愿意这样做，因为实际文档显示了很好的示例。如何使用pullRight道具获得Nav，以将其很好地定位在NavBar中？

这是显示问题的图像：

我正在使用map遍历元素列表，我想要的是每行有4个元素。这是我的课程的一部分：

render() {
    return (
      <div>
        <h1>Card List</h1>

        {this.props.items ? this.props.items.map((item) =>
          <div class="cardSection">
            <Row className="show-grid">
                <Card name={item.name} imgGold={item.imgGold}  />
            </Row>
          </div>

        ) : <div>Loading!</div>}

      </div>
    )
  }
}

我想使用xs = {4} md = {4}每行4个Card组件

我正在使用React Bootstrap的选项卡，并且遇到一个问题，我无法将图标传递给标题道具，因为它显示为[Object] [Object]，对此有何想法？

const tabsInstance = (
  <Tabs defaultActiveKey={1}>
    <Tab eventKey={1} title={`Tab1 ${<i class=" icon-remove"></i>}`}>Tab 1 content</Tab>
    <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
    <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
  </Tabs>
);

输出显示为：

Tab1 [对象] [对象]选项卡2选项卡3

如何显示icon在选项卡中而不是Title？

======更新=====建议后显示输出。

我刚刚开始学习react-bootstrap，但在获取NavBar组件以正确呈现时遇到了一个问题。首先，我复制了在https://react-bootstrap.github.io/components/navbar/上找到的基本导航栏的代码，但以下内容是我得到的。

如此处所示： navbar-component

据我所知，我已经准备就绪，包括index.html头中的css以及将webpack与css-loader一起使用。显然我缺少了一些东西，需要帮助！

Navigation.js

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

    const Navigation = () => ( 
    <div>
    <Navbar>
      <Navbar.Header>
        <Navbar.Brand>
          <a href="#home">React-Bootstrap</a>
        </Navbar.Brand>
      </Navbar.Header>
      <Nav>
        <NavItem eventKey={1} href="#">
          Link
        </NavItem>
        <NavItem eventKey={2} href="#">
          Link
        </NavItem>
        <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.4}>Separated link</MenuItem>
        </NavDropdown>
      </Nav>
    </Navbar>
  </div>
);

export default Navigation; …

在这里将onSelect放入MenuItem或 DropdownButton的位置。

在这个简单的示例中，当用户选择menuitem时，它不会反映到下拉按钮中。

在onSelect或onChange上有示例吗？

<div className="select_option">
    <label htmlFor="type">Document Desc</label>
    <DropdownButton title="--Select One--" id="document-type">
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
        <MenuItem>Item 3</MenuItem>
        <MenuItem>Item 4</MenuItem>
    </DropdownButton>
</div>