标签: react-bootstrap

我不知道为什么,但我注意到我的浏览器控制台中有很多关于未知道具的警告.以下是一些警告:

"Warning: Unknown prop `navbar` on <ul> tag. Remove this prop from the element. For details, see 
    in ul (created by Nav)
    in Nav (created by NavbarWrapper)
    in div (created by NavbarWrapper)"

"Warning: Unknown prop `divider` on <a> tag. Remove this prop from the element. For details, see 
    in a (created by SafeAnchor)
    in SafeAnchor (created by MenuItem)
    in li (created by MenuItem)
    in MenuItem (created by NavbarWrapper)
    in ul (created by DropdownMenu)
    in DropdownMenu (created by Dropdown)
    in li …

我有6个按钮,当点击时,激活一个模态.这是用React编写的.

//Since I have 6 different modals, giving each of them an id would distinguish them
onCloseModal(id) {
    this.setState({
        open: false,
        modalShown: id
    })
}

render() {
    return (
        <Modal onHide={this.onCloseModal.bind(this, item.id)} keyboard={true}>
            <Modal.Header closeButton={true} onHide={this.onCloseModal.bind(this)}>
            </Modal.Header>
        </Modal>
    )
}

我有keyboard={true},根据https://react-bootstrap.github.io/components.html#modals-props的文档,按Escape键将退出模态.但它不起作用.我相信我已经设置了所有内容,因为我的每个按钮都有一个唯一的ID - 为什么逃生键不响应？

这是一个模态的图像.

我正在尝试使用react-bootstrap复选框(https://react-bootstrap.github.io/components.html#forms-controls),我需要在更改状态时触发事件.能够以编程方式取消/检查它和/或判断它是否被检查也是很好的.不幸的是,当代码被转换并呈现​​时,它将输入包装在div中.

我怎样才能在dom中找到它并操纵它？

我的代码看起来类似于:

import React, { PropTypes } from 'react';
import { Checkbox } from 'react-bootstrap';

const EditItem = (props) => {

  return (
    <div>
      <Checkbox style={{ marginLeft: '15px' }} >{props.itemLable}</Checkbox>
    </div>
  );
};

export default EditItem;

浏览器渲染:

...
<div class="checkbox" style="margin-left: 15px;">
  <label>
    <input type="checkbox">
  </label>
</div>
...

我在文档中看到了inputRef prop,但是我找不到任何这样的例子或让它自己工作.

如何使用react-bootstrap设置NavBar应折叠的值？我似乎无法使用我在网上找到的任何东西.

例如,它目前在768px下崩溃,但我希望它在850px下崩溃.

<Navbar inverse collapseOnSelect>
<Navbar.Header>
    <Navbar.Brand>
        <a className='navItem' href="#" id='name_badge'><Link to='/'>asdf</Link></a>
    </Navbar.Brand>
    <Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
    <NavItem className='navItem hvr-wobble-skew' eventKey={1} href="#"><Link to='/about'>About</Link></NavItem>
    <NavItem className='navItem hvr-wobble-skew' eventKey={2} href="#"><Link to='/projects'>Projects</Link></NavItem>
    <NavItem className='navItem hvr-wobble-skew' eventKey={3}><Link to='/skills'>Skills</Link></NavItem>
    <NavItem className='navItem hvr-wobble-skew' eventKey={3}><Link to='/contact'>Contact</Link></NavItem>
</Nav>
<div className="pullRight">
    <Nav>
        <Navbar.Text>
            <Navbar.Link target='_blank' href="https://www.facebook.com/pages/bla"><FaInstagram size={30}/></Navbar.Link>
        </Navbar.Text> 
        <Navbar.Text>
            <Navbar.Link target='_blank' href="https://www.facebook.com/pages/ad"><FaFacebookSquare size={30}/></Navbar.Link>
        </Navbar.Text> 
        <Navbar.Text>
            <Navbar.Link target='_blank' href="https://www.facebook.com/pages/fd"><FaGithubAlt size={30}/></Navbar.Link>
        </Navbar.Text>                    
    </Nav>
</div>
</Navbar.Collapse>
</Navbar>   

我正在尝试在Typescript应用程序中更改React-Bootstrap面板中标题的大小.我将文本包装在<h1>标签中,正如文档中提到的那样,但没有任何改变.

我尝试添加内联样式,甚至是我正在尝试更改fontSize的css className,但是再次没有结果.

这是代码.

const title = (<h1>{Constants.gameTitle}</h1>);
<PanelGroup defaultActiveKey="1" accordion key="accordion1">
    <Panel defaultExpanded header={title} className="changeFontSize" eventKey="1" bsSize="large" bsStyle="primary">
     </Panel>
</PanelGroup>

有什么可能的方法来做这个吗？

我在React应用程序中使用React-Bootstrap。这导致左侧和右侧的边距。我正在使用以下代码：

import React, { Component } from "react";
import "react-bootstrap/dist/react-bootstrap.min.js";
import "bootstrap/dist/css/bootstrap.min.css";
import { Grid, Row, Col } from "react-bootstrap";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import AppBar from "material-ui/AppBar";

<Grid fluid>
   <Row>
      <Col xs={12} md={12}>
        <AppBar title="Title"
         iconClassNameRight="muidocs-icon-navigation-expand-more"/>
       </Col>
   </Row>
   <Row>
       <Col xs={4} md={4}>
          <h1>Hello</h1>
       </Col>
       <Col xs={8} md={8} >
          <h1>Hello World!</h1>
       </Col>
   </Row>
</Grid>

我得到以下输出：

如果我xs and md从中删除，<Col>问题将得到解决。

导入twitter-bootstrap导致此问题。如果我删除了twitter-bootstrap导入，则引导程序样式不起作用。

这个问题与Twitter-Bootstrap的问题相同，但是我无法在React-Bootstrap中修复它。

我正在使用react-bootstrap，并尝试将选定的 <ToggleButton>背景颜色更改为蓝色。

例如：

<ButtonToolbar>
  <ToggleButtonGroup
    type="radio"
    name="options"
    value={...}
    onChange={...}>
    <ToggleButton ... />
    <ToggleButton ... />
    <ToggleButton ... />
  </ToggleButtonGroup>
</ButtonToolbar>

因此，我想要蓝色，而不是下面看到的 M/W/F 的深灰色。我已经尝试了十亿种 CSS 技巧，但就是无法实现。谢谢！

很抱歉，我缺乏知识，但我是新手，目前正在学习。只想问一下我是否想在我的react应用程序中使用bootstrap 4，是否必须安装JQUERY？我在某处读到，将JQUERY与React一起使用是不行的。所以现在我在想。谢谢回复。您的意见和建议是真正的赞赏。

我正在尝试使用ReactJS创建一个简单的Webapp，我想使用NavbarReact-Bootstrap提供的。

我创建了一个Navigation.js文件，其中包含一个类，Navigation用于将Navbar和和路由与App.js文件分开。但是，这两个部分似乎都不起作用。当我加载页面时，它只是空的，没有导航栏。谁能发现一个错误？

Navigation.js：

import React, { Component } from 'react';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
import { Switch, Route } from 'react-router-dom';
import { Home } from './Page';

class Navigation extends Component {
    render() {
        return (
            <div>
                <div>
                    <Navbar>
                        <Navbar.Brand href="/">React-Bootstrap</Navbar.Brand>
                        <Navbar.Collapse>
                            <Nav className="mr-auto">
                                <NavItem eventkey={1} href="/">
                                    <Nav.Link href="/">Home</Nav.Link>
                                </NavItem>
                            </Nav>
                            <Form inline>
                                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                                <Button variant="outline-success">Search</Button>
                            </Form>
                        </Navbar.Collapse>
                    </Navbar> …

我使用 CSS 在 ReactJS 中设计了一个网页。对于其中一个组件，我使用 Bootstrap 进行样式设置。我添加了最新的 bootstrap cdn 链接并将其粘贴到“index.html”文件中。当我使用该引导程序链接时，它会覆盖我的一些自定义样式。我的项目的每个组件都有一个单独的 CSS 和 JS 文件。请建议任何解决方案，我应该将该引导链接放在我的项目中的哪里，以便它不会覆盖我的自定义 CSS 样式。谢谢。