标签: react-bootstrap

我想知道什么是“正确的解决方案”，即如何在页面中正确显示轮播或如何进行。

http://i.imgur.com/m8VYVRv.png

来自 react-bootstrap 组件网站的代码

             <Well>
                <Carousel>
                    <Carousel.Item>
                        <img width={900} height={500} alt="900x500" src="src/assets/construction-maison.jpg"/>
                        <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="src/assets/chantier.jpg"/>
                        <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="src/assets/Maison_en_construction_Demoli.jpg"/>
                        <Carousel.Caption>
                            <h3>Third slide label</h3>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                </Carousel>
            </Well>

http://i.imgur.com/BgqNfTE.png

img {
    margin: auto;
}

这是我带来的解决方案，但感觉有点“关闭”。

是否应该使用自动边距缩小轮播以匹配图片的大小，然后将其放在页面中央？

Index.js：

import React from 'react'; 
import buttonsInstance from 'components/button-instance';
import {ReactDOM} from 'react-dom';

ReactDOM.render(buttonsInstance, document.getElementById('app'));

和button-instance.js：

import React from 'react';
import {ButtonToolbar} from 'react-bootstrap';
import {Button} from 'react-bootstrap';

const buttonsInstance = (
  <div>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="large">Large button</Button>
      <Button bsSize="large">Large button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary">Default button</Button>
      <Button>Default button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="small">Small button</Button>
      <Button bsSize="small">Small button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
      <Button bsSize="xsmall">Extra small button</Button>
    </ButtonToolbar>
  </div>
);

我正在尝试reactbootstrap从https://react-bootstrap.github.io/components.html使用。

然后我得到了错误：

Uncaught …

我正在尝试构建一个下拉菜单，因此我将DropdownButton和MenuItem.

import { DropdownButton } from 'react-bootstrap';
import { MenuItem } from 'react-bootstrap';

但是，我看到以下错误：

error  'react-bootstrap' import is duplicated  no-duplicate-imports

如何从 react-bootstrap 导入这两个组件？

我正在尝试使用 react-bootstrap-typeahead 验证选择，并在移动到页面的另一个区域时清除输入文本（如果无效）。

我想不出一个好的方法来做到这一点。

Typeahead 组件的 onBlur 没有在正确的时间触发以进行验证和清除。

任何建议，将不胜感激

这是我的预输入定义

        <Typeahead  bsSize="sm"
                    defaultSelected = {this.props.options.slice(selectedIndex)}
                    clearButton
                    labelKey="roomNumber"
                    options={this.props.options}
                    placeholder={this.props.placeholder}                          
                    name={this.props.nameId}
                    ref={ref => this.roomChoice = ref}
                    onChange={this.onChangeHandler.bind(this)}
                    onInputChange={this.onInputChangeHandler.bind(this)}
                    onBlur={this.onBlurHandler.bind(this)} 
                    onFocus={this.onFocusHandler.bind(this)} 
                  />

这是我的 onBlur 函数：

onBlurHandler(event)
{   
         if (this.roomInputText)
        {
            if (!this.roomSelectedOption)
            {
                this.roomChoice.getInstance().clear()
            }
        }

}

如果有人输入文本，onBlur 不会在正确的时间触发我选择选项。

我正在使用这个 CSS

.reasonButton:focus{
   color: #fff;
    background-color: #676666;
    border-color: #adadad;
    outline: none;
}

有人可以帮我解决这个问题吗？谢谢

我现在正在构建一个基于 drupal 的电子商务网站，但被卡住了。总体上对反应和编码仍然很陌生，但正在努力学习。所以我已经使用 redux 和 rest api 提取了我的所有数据，并且我正在获取我的产品、变体和属性。产品页面基于 url 设置特定产品，现在我需要能够通过下拉菜单选择不同的属性。目前我有一个与 react-bootstrap 文档中显示的匹配的占位符下拉列表。但是，我需要根据保存属性的数组在该下拉列表中放置选项。

我确定这很简单，但我一直在四处寻找，但还没有找到有效的答案。希望大家能帮帮忙。

当您查看代码时，请记住，sizes = [] 是我希望将数据作为下拉列表中的可选选项放置的数组。

这是产品页面：

import React, { Component} from 'react';
import '../../css/Home.css';
import MenuBar from "../sub-components/MenuBar";
import LeftMenuBar from "../sub-components/LeftMenuBar";
import "../../css/ProductPage.css"
import WomensWear from "../../media/WomensWear.jpg"
import {
    Dropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem } from 'reactstrap';

class ProductPage extends Component {
    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
            dropdownOpen: false
        };
    }

    toggle() {
        this.setState(prevState => ({
            dropdownOpen: !prevState.dropdownOpen
        }));
    }

    getProduct() {

        let product …

我在我的 React 项目中使用 React-Bootstrap，并希望在移动或 XS 视图中更改列顺序。

下面的代码为我提供了一个不错的 2 列布局，并在视口为 xs 时响应 1 列：

    return (
      <Container>
        <Row className={styles.section}>
          <Col xs={12} md={6}>
            <h2>{this.props.heading}</h2>
            <p>{this.props.content}</p>
          </Col>
          <Col>
            <p>
              <img src={this.props.img} />
            </p>
          </Col>
        </Row>
      </Container>
    );

我想让第二列（带有 的列{this.props.img}）在 xs/mobile 视图中位于顶部。

所以我添加xs={{ order: 1 }}到该列：

<Col xs={{ order: 1 }}>
   <p>
     <img src={this.props.img} />
   </p>
</Col>

然而这并没有奏效。使用 vanilla Bootstrap，您可以添加class="order-xs-1"，这将起作用。

任何有关这方面的提示都会很棒，谢谢！

我想隐藏<Col></Col>在小屏幕设备上。我查看了 react-bootstrap 文档，但它没有提到这样做的方法。

https://react-bootstrap.github.io/layout/grid/

简单地react + bootstrap说，可以实现<div className="hidden-xs"></div>，但使用不再有效的库 react-bootstrap 。我试过：<Col xs="0"></Col>和类似的，但没有奏效。

有谁知道如何隐藏 react-bootstrap 列？

我用于 ListGroups 的 React-Bootstrap 代码有一个名为“Sonnet”的组件，它可能尚未在 React-Bootstrap 中导出，因此我面临着“Sonnet”不是从“react-bootstrap”问题导出的问题无论我尝试手动导入它还是使用“*”导入完整的 React-bootstrap 包。我还没有找到一个线程或博客甚至列出了“十四行诗”错误或任何与此相关的内容。需要你们帮我理解！

我的尝试是：重新安装 bootstrap/ import {Sonnet} from 'react-bootstrap';/ import * as ReactBootstrap from 'react-bootstrap';

没有似乎工作

参考样本：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
//import './Assets/css/default.min.css';
//import * as ReactBootstrap from 'react-bootstrap';
import {Card,ListGroup,Tab,Row,Col,Sonnet} from 'react-bootstrap';
class Data extends React.Component {
  render(){
    return (
        <data>
            <div className="data">
            <Tab.Container id="list-group-tabs-example" defaultActiveKey="#link1">
                <Row>
                    <Col sm={4}>
                    <ListGroup>
                        <ListGroup.Item> Online Devices
                        </ListGroup.Item>
                        <ListGroup.Item action href="#link1">
                        Soil Sensor
                        </ListGroup.Item>
                        <ListGroup.Item action href="#link2">
                        Level Sensor
                        </ListGroup.Item>
                    </ListGroup>
                    </Col>
                    <Col sm={8}>
                    <Tab.Content> …

我正在制作一个网站，我在其中使用 react-router-dom 的 NavLink 组件来防止单页应用程序体验的重新渲染。

当我试图使站点具有响应性时，我一直在尝试在选择 NavLink 后使响应式导航栏从 react-bootstrap 崩溃，但是 collapseOnSelect 行为似乎不适用于除 Nav.Link 组件以外的任何其他组件与反应引导。

其他解决方案建议使用手动切换功能等将道具传递给导航 (navExpanded:true)，但这似乎仍会由于状态更改而强制重新渲染。我想避免这种情况的主要原因是我使用 react-transitions-group 在页面之间进行了转换。

<Navbar collapseOnSelect expand="md" variant="dark">
    <Container>
        <Navbar.Brand href="/"><Logo/></Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="Navs ml-auto">
                <NavLink className="nav-link" to="/about">ABOUT</NavLink>
                <NavLink className="nav-link" to="/portfolio">PORTFOLIO</NavLink>
                <NavLink className="nav-link" to="/contact">CONTACT</NavLink>
            </Nav>
        </Navbar.Collapse>
    </Container>
</Navbar>

任何帮助将不胜感激！