标签: react-bootstrap

我正在使用http://react-bootstrap.github.io/ Carousel 组件。我正在尝试自定义包含一些文本的轮播指示器，并使其看起来像一个带有文本的按钮，但将渲染“ol”标签反应为一个新的 CarouseItem 并且没有重定向功能

    return (
       <Carousel id="sampleSlide" indicators={false}>
          <ol className="carousel-indicators">
            <li data-target='#sampleSlide' data-slide-to="0" className="active"></li>
            <li data-target= '#sampleSlide' data-slide-to="1"></li>
          </ol>
          <CarouselItem>
            <div className="itemContent">
               Hello World
            </div>
          </CarouselItem>
          <CarouselItem>
            <div className="itemContent">
               Hello World
            </div>
          </CarouselItem>
      </Carousel>
    );

有什么方法可以自定义它或任何其他方法吗？

I'm calling a parent method from child component using props and I'm getting this error:

The way I'm passing props to the AddGuest child component is like this:

import React from 'react';
 import globalService from '../services/globalService';

   import '../styles/chairqueue.css';
   import {buttonText,endPoint} from '../constants/global.constants';
   import Modal from 'react-bootstrap/Modal'
   import ModalDialog from 'react-bootstrap/ModalDialog'
import ModalHeader from 'react-bootstrap/ModalHeader'
import ModalTitle from 'react-bootstrap/ModalTitle'
import ModalBody from 'react-bootstrap/ModalBody'
import ModalFooter from 'react-bootstrap/ModalFooter'
import Button from 'react-bootstrap/Button'
import  { useState, useEffect } from 'react';
import DatePicker from …

我收到此错误我使用 npx-create-react-app 创建了一个新项目，然后按照此处写下的说明进行操作：https : //react-bootstrap.github.io/getting-started/introduction 我已经安装使用：npm install react-bootstrap bootstrap。然后把 CDN 复制到我的 index.html

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link
**rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>**
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

然后导入了：

import React from 'react';
import  {Grid}  from 'react-bootstrap';
import './App.css';

function App() {
  return (
    <div className="container">
        <Grid className ="purchase-card">
          <h1>Hello World</h1>
        </Grid>
    </div>
  );
}

export default App;

我已经尝试在 Google 上搜索解决方案和导入的变体（例如，从“react-bootstrap/Button”导入按钮），但我似乎找不到导致此问题的问题。

我在我的项目中使用 React-bootstrap。我需要打开多个对话框。有没有办法实现这一目标？

注：有一个引导的答案在这里，但它不工作的反应，引导。谢谢。

我正在使用 dialogClassName 道具将模态的宽度更改为 90%。CSS 不会改变任何东西。我已经验证 style.css 对所有其他类都可以正常工作。

这个 SO问题的解决方案不起作用。该文档也不起作用。

我感谢您的帮助！

modal.js的 render 方法：

render(){
    return (
        <div>
            <CardMain openModal={this.handleOpen}
                                {...this.props} />
            <Modal show={this.state.open}
                   onHide={this.handleClose}
                   dialogClassName="main-modal">
                <ModalMain tabKey={this.state.tabKey}
                                  {...this.props} />
                <FeedbackForm />
            </Modal>
        </div>
    );
}

样式.css：

.main-modal {
    width: 90%;
}

我正在尝试使用react-bootsrap在react中实现类似的目标：http://www.bootply.com/T0v2NlXryW

我的反应代码现在是这样的，但不起作用：

<Table>
<thead>
    <tr>
        <th>Job Name</th>
        <th>Description</th>
        <th>Provider Name</th>
        <th>Region</th>
        <th>Status</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#demo1" className="accordion-toggle">
        <td>OBS Name</td>
        <td>OBS Description</td>
        <td>hpcloud</td>
        <td>nova</td>
        <td> created</td>
    </tr>
    <tr>
        <td colspan="12" className="hiddenRow">
            <div className="accordian-body collapse" id="demo1">
                <h1>Hi from the hiddenRow</h1>
            </div>
        </td>
    </tr>
</tbody></Table>

表显示正确，但行在单击时不会展开。

我正在尝试将自定义 css 样式应用于 react bootstrap 组件，但无法确定如何访问组件的 JSX 中不明确的元素。例如：

<ButtonGroup>
      <DropdownButton className="ddown" id="ddown" title="Dropdown">
      <MenuItem className="itemxx" href="#books">Books</MenuItem>
      <MenuItem className="itemxx" href="#podcasts">Podcasts</MenuItem>
      <MenuItem className="itemxx" href="#">Tech I Like</MenuItem>
      <MenuItem className="itemxx" href="#">About me</MenuItem>
      <MenuItem className="itemxx" href="#addBlog">Add a Blog</MenuItem>
      </DropdownButton>
    </ButtonGroup>

没有下拉框的出口，我希望给它一个特定的宽度并消除它的圆角。有没有办法可以在我的 css 中访问它？

编辑：

这是我要编辑的元素，顺便说一下，如果我尝试通过 .dropdown-menu 访问，1) 我更改了所有下拉列表，2) 我无法更改其大部分值。

我正在尝试学习 MEAN，并且正在尝试制作一个简单的 Pokemon 查找器。

问题是我在处理附加到组件的事件时遇到了麻烦。

这是主要视图：

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

/* Import Components */
import Search from './components/Search/Search';
import { Grid, Row, Col } from 'react-bootstrap';

/* Import Actions */
import { fetchByName } from './PokedexActions';

// Import Style
//import styles from './Pokedex.css';

class Pokedex extends Component {

  handleFind= (name) =>{
    this.props.dispatch(fetchByName({name}));
  };

  render() {
    return (
      <Grid>
        <Row>
          <Col md={4}>
            <Search findPokemon={this.handleFind}/>
          </Col> …

我使用 react-bootstrap 库（https://react-bootstrap.github.io/components.html#tooltips），我想连续显示多个 div，每个 div 都有一个工具提示。

{ _.map(blueprint.components, (component, i) => {
    const tooltipId = 'tooltip-' + _.replace(blueprint.name, ' ', '-') + '-' + _.replace(component.name, ' ', '-');
    const tooltip = (
        <Tooltip id={ tooltipId }>
            test
        </Tooltip>
    );
    return (
        <div>
            <OverlayTrigger key={ i } placement='top' overlay={ tooltip }>
                <div>
                    <ImageIcon name={ component.name } size='small'/>
                </div>
            </OverlayTrigger>
        </div>
    );
}) }

这是我为实现这一目标而编写的一段代码。示例蓝图对象如下所示：

[
    {
        "id": "123442b4d432d10008c650f7",
        "name": "Example Blueprint",
        "components": [
            {
                "name": "Apache",
                "module": "apache",
                "version": …

我有一个 QWERTY 键盘，通过组件动态呈现为通过 bootstrap-react 的 Bootstrap 按钮。他们没有 ID，我试图不在 React 中使用 ID 作为拐杖。

当单击其中一个字母时，它会通过 props 触发 onClick 事件，返回到我的 App.js。这很好用。我希望该按钮随后被禁用。因为它没有 ID，所以我无法执行 jQuery 类和数据值选择器，因为：React。

如何将该按钮属性更改为“禁用”（“禁用”是 React 中允许的 HTML 属性）。

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


const keyboard = props => {
return (
    <div>
        {props.keyboard.keys.map((item,index) => (
           <Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()}> {item.toUpperCase()}
            </Button>
        ))}
    </div>
)
}

export default keyboard;

到目前为止，我的点击事件正在按预期工作。理想情况下，我希望按钮更改为：

<Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()} disabled> {item.toUpperCase()}</Button>

点击事件之后。

键盘是从我的 App.js 引用的，如下所示：

            <Panel header="Keyboard:">
                <Keyboard keyboard={this.keyboard.row1} click={(event) => …