标签: react-bootstrap

我正在尝试从Reat项目（使用create-react-app引导）中的React-Bootstrap文档中重新创建一些代码。

但是我对这些Boostrap“子组件”有疑问，例如 NavBar.Header

这是我的代码：

import React, {Component} from 'react';
import {NavBar, Nav, NavItem} from 'react-bootstrap';

class MainNav extends Component {
  render() {
    return (
      <Navbar>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="#">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>
    )
  }
}

export default MainNav;

我收到以下控制台错误：

Uncaught TypeError: Cannot read property 'Header' of undefined
    at MainNav.render (MainNav.js:15)
    at …

我想在title道具中执行以下操作：

<Tab title={<Glyphicon glyph="time" /> Real-Time}></Tab>

但它不起作用。我明白了Unexpected token, expected }。所以 astring不能跟随 React 组件。

如何让它在没有数组、函数、创建新组件等的情况下工作。 React 是否有办法在一行中完成，就像我的例子一样？

我试图在反应引导工具提示中更改工具提示背景颜色。

从这篇文章中，它可以在 css 文件中更改。但是我有可能显示 40 种不同的颜色。

我一直在尝试这样做：

<Tooltip id={this.props.name} style={{".tooltip_inner":{"background":backgroundColor}}}>{this.props.name}</Tooltip>

但这不起作用。我无法在渲染中设置 tooltip_inner 并且我不确定如何动态访问它。我试过 getElementsBy-Name 但这也不起作用。

感谢您的任何帮助。

我在子组件中有一个模态，它处理父组件中的删除功能。孩子保持着模态的状态（打开或关闭），因为这似乎是最合乎逻辑的地方。

家长

 removeItem() {
   console.log('clicked');
  };

 ...

 <DeleteButton deleterecord={()=>this.removeItem(data.row._original._id)}/>

孩子

close() {
  this.setState({ showModal: false })
};

open() {
  this.setState({ showModal: true })
};


render() {

 return(
  <div>
    <Button
    bsStyle="primary"
    bsSize="small"
    onClick={this.open.bind(this)}
  >
    Delete
  </Button>

  <Modal
    show={this.state.showModal}
    onHide={this.close.bind(this)}
    bsSize="small"
    >
   ...

在 removeItem 代码运行后，我应该如何从父级关闭模式。

我是Reactjs编程的新手，我有一个使用react bootstrap网格的组件。

我想每5秒从某个公共API提取一个配额，并在

在网格内部。我也想使用axios来获取报价。任何教程或任何帮助将不胜感激。谢谢 ：）

我正在尝试为应用程序创建登录模式表单。但是，当我单击链接而不是按钮时，我希望弹出窗口出现。换句话说，当我点击导航栏中的登录链接时，我不想被完全重定向到另一个页面。我只想弹出模态。

我对 ReactJS 很陌生，所以我不知道该怎么做。有人可以帮我理解如何让这个功能工作吗？我真的很感激。

此外，如果有人知道有关如何实现正确登录表单的一些重要资源，我也将不胜感激。我在 CodePen 上找到了一些，但没有一个真正展示了如何构建这个组件的清晰易懂的方法。至少，对于我这样的初学者来说。

下面是我的代码。另外，如果有帮助，我提供了我目前使用的站点的链接作为构建此代码的参考。

资源：https : //react-bootstrap.github.io/components/modal/

应用程序.js

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Navbar from './components/Navbar/navbar.js';
import Footer from './components/Footer/footer.js';
import Home from './pages/Home/home.js';
import Login from './pages/Login/login.js';
import Languages from './pages/Languages/languages.js';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar/>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/languages" component={Languages}/>
          </Switch>
      </BrowserRouter>
      <Footer />
    </div>
  );
}

export default App;

导航栏.js

import React from 'react';
import { …

我正在使用 React-Bootstrap 库开发一个 React 应用程序。我显示了一个 ShopResume 组件，该组件在内部的地图函数中呈现 CardGroup 元素，以将我的数据映射到我的 CardGroup 中的每张卡片上。

我想按行最多显示 3 张卡片。但我所有的改变似乎都不起作用。有人可以帮我解决吗？

现在，我所有的卡片都只显示在一行中。当我的渲染已经在一行上显示 2 个项目时，我想创建新行。

奖励问题：即使条件为真，我的三元运算符也不显示它应该显示的内容。如果有任何想法可能会出现。我将不胜感激。

非常感谢您一如既往的帮助和宝贵的回答

class ShopResume extends Component {
  state = {};
  render() {

    return (
      <React.Fragment>
 {(this.props.filteredResults === [""]) ? "Aucun Résultat" : 

    ( <CardGroup className="card_container">
      {this.props.filteredResults.map((detail, index) => {
        return (
          <Card className="card_item" key={index}>
            <Card.Img variant="top" src={detail.imgURL} id="card_img" />
            <Card.Body>
              <Card.Title className="shopTitle">{detail.nom}</Card.Title>
              <Card.Text>{detail.resume}</Card.Text>
              <Button variant="primary" onClick={this.props.filterClick}>Détails</Button>


              <ListGroup className="list-group-flush">
                <ListGroupItem>
                  {detail.startPrice === "" ? "Sur devis" : 'A partir de ' + detail.startPrice + …

我有false默认状态。当复选框被选中时，我希望状态变为true.

state = {
    status: false,
}

handleChange = (event) => {
    this.setState({
      [event.target.id]: event.target.value
    });
}


 <Form.Check
    type="checkbox" 
    label="Consigne temporaire"
    value={this.state.status}
    onChange={this.handleChange} />

当我单击复选框时，状态不会改变。它总是假的。

我正在尝试使用引导程序构建一个反应应用程序，该应用程序将展示类似于 CCC 的卡片显示为连续 3 行，并且有 3 行，但我收到此错误：

解析错误：相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 <>...？

这是代码：

import React from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

function App() {
  return (
    <Card>
      <Card.Img variant="top"
        src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>
          This is a wider card with supporting text below as a natural lead - in to
        additional content.This content is a little bit longer.
        </Card.Text>
      </Card.Body>
    </Card>
    <Card>
      <Card.Img variant="top" src="holder.js/100px160" /> …

我有一个 React Bootstrap Form 组件，我想在其中获取选择表单控件的值。我试图用 onChange 更新我的钩子的值，但我似乎无法让它工作（类型始终保持为空字符串），我当前的代码如下。

const [type, setType]: any = useState('');
render(
<Form.Group controlId="formBasicSelect">
     <Form.Label>Select Norm Type</Form.Label>
     <Form.Control as="select" >
        <option value="DICTUM">Dictamen</option>
        <option value="CONSTANCY">Constancia</option>
        <option value="COMPLEMENT">Complemento</option>
     value={type}
     onChange={(e: any) => setText(e.target.value)}
     </Form.Control>
 </Form.Group>
);

类似的方法适用于其他 Form 控件，但也许 select 有一些不同之处。