标签: react-bootstrap

按照本教程，我成功地在使用 .React 创建的 React 应用程序中覆盖 Bootstrap 5 默认颜色create-react-app。在我的内部，/src/scss/custom.scss我可以调用任何新定义的变量并随意使用它，甚至内部新创建的类也custom.scss可以正常工作。btn-primary尽管如此，使用颜色（如、bg-secondary或）的默认 Bootstrap 类text-white根本不会改变。例如，当我使用 时btn-primary，按钮颜色与默认 Bootstrap 原色相同的旧蓝色。

我缺少什么？

当运行安装了react-bootstrap的create-react-app应用程序时，我在尝试添加按钮时收到下面的错误

我的导入是这样的：

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import PropTypes from "prop-types";
import { Button } from "bootstrap";
import { PureComponent } from "react";

和渲染代码：

  render() {
    return (
      <div className="App">
        <header />
        <Button>Test</Button>
        ...

我研究了许多其他有关 Babel、Webpack 和编译器配置的问题。但我在 create-react-app 中没有看到所有这些配置。

这是一个简单的问题，如何在reactrouter 6上选择项目时重新加载页面<NavLink>？因为reactrouter 5要<BrowserRouter forceRefresh={true} />重新加载页面。

下面是我的代码，也是完整的沙箱代码https://codesandbox.io/。

export default function App() {
  return (
    <BrowserRouter>
      <header>
        <Navbar />
      </header>

      <main className="flex-shrink-0">
        <React.Suspense fallback={<h6>Loading...</h6>}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </React.Suspense>
      </main>
    </BrowserRouter>
  );
}

任何解决方法或可能的解决方案都会有所帮助。

Razzle 是一个服务器端渲染框架。

这是错误：

/home/ajay/Ajay Nagotha/Projects/react-ssr-demo/luma-ssr/node_modules/react-bootstrap/esm/Container.js:1
import classNames from 'classnames';
^^^^^^

SyntaxError: Cannot use import statement outside a module

我升级了我的依赖项，这给我带来了以下问题 - 这两个按钮过去彼此相邻放置，但现在它们堆叠在彼此之上并占据完整宽度：

import { Button as BootstrapButton, Row, Container, Table } from 'react-bootstrap';

        <Container>
            <Row>
                <Button />
                <Button />
            </Row>
        <Container>

我想 Bootstrap 5 和 React-Bootstrap 2 有很多变化，所以我可能会错过一些非常简单的东西，但我在 React-Bootstrap 的文档中找不到任何相关内容

我正在尝试将自定义验证逻辑添加到我的react-bootstrap表单中，但isInvalid似乎没有得到尊重。一旦validated={true}在表单上设置，它总是验证非空字符串，无论isValid或isInvalid。显示无效消息，但该字段显示为绿色。看这里：

这是有问题的代码：

 <Form noValidate validated={formValidated} id="bidForm">
    <Form.Group className="mb-3" controlId="formBasicBidding">
       <Form.Label>Bid Amount</Form.Label>
       <InputGroup hasValidation className="mb-3">
           <InputGroup.Text id="inputGroupPrepend">$</InputGroup.Text>
           <Form.Control
              required
              value={bidAmount}
              isInvalid={!(parseInt(bidAmount) > 0) && formValidated}
              onChange={e => setBidAmount(e.target.value)}
           />
           <InputGroup.Text id="inputGroupAppend">.00</InputGroup.Text>
           <Form.Control.Feedback type="invalid">
               Please select a dollar amount {`>`} 0
           </Form.Control.Feedback>
        </InputGroup>
    </Form.Group>
    <...>
</Form>

我能够pattern=在输入上使用正则表达式使其工作，但我计划在正则表达式不够的情况下进行更复杂的验证。我怎样才能正确地react-bootstrap遵循？谢谢！isValidisInvalid

我正在将 React 用于一个使用 React-Bootstrap Snipper 的项目。但它非常小，现在我想改变它的大小。我怎样才能改变它？

<div
  style={{ width: "200px", height: "200px" }}
  className="w-100 d-flex text-[#DC2626] justify-content-center align-items-center">
  {/* bootstrap spinner */}
  <Spinner animation="border" role="status">
    <span className="visually-hidden">Loading...</span>
  </Spinner>
</div>

我有一个组件,我在其中导入reactBootstrap:

import ReactBootstrap from 'react-bootstrap'

然后我在我的组件中有一个函数,当用户单击按钮时会触发该函数:

onClickBtn : function() {
  var Modal = ReactBootstrap.Modal;
  return (
    <Modal>
      ... 
    </Modal>
  )
}

但是,我收到错误:

未捕获的TypeError:无法读取未定义的属性"模态".

我在使用react-bootstrap指南时遇到了麻烦,我想知道是否有人知道如何轻松导入模态.谢谢

当我尝试使用React-Bootstrap设置FormControl的值时,我在控制台中遇到错误.

invariant.js:44 Uncaught Error: Objects are not valid as a React child (found: [object HTMLTextAreaElement]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `FormGroup`.

FormControl没有值的方法,因此不确定如何实现此目的.这就是我试图设置值的方式.

<FormGroup controlId="parameterDescription">
    <ControlLabel>Description</ControlLabel>
    <FormControl componentClass="textarea" placeholder="Description of parameter function" inputRef={(ref) => {this.state.description = ref}} readOnly={true}>
        {this.state.description}
    </FormControl>
</FormGroup>

这是我正在使用Formik和react-bootstrap编写的表单的模板。我发现一个非常奇怪的错误：如果我在构造函数中用伪数据初始化状态，那么它将正常工作；但是，如果我使用完全相同的数据调用setState componentDidMount来模拟API调用，则它将严重中断。

具体来说，我发现状态变量alertVehicles数组的长度可以为非零，但相应的Formik values.alertVehicles变量可以为空。现在，所写的表单未显示任何复选框。如果我在guard子句中使用alertVehicles而不是values.alertVehicles，则它会因error爆炸Cannot read property 'selected' of undefined。

import React, {Component} from 'react';
import Form from 'react-bootstrap/Form';
import { Formik } from 'formik';
import Button from 'react-bootstrap/Button';


class Alerts extends Component {
    constructor(props) {
        super(props);
        this.loadAlertData = this.loadAlertData.bind(this);
        this.state = {
            alertRecipient: {},
            alertId: '',
            alertVehicles: []
        }
    }

    componentDidMount(){
        this.loadAlertData();
    }

    loadAlertData(){
        // this will be an API call eventually, obviously.
        // if this is initialised in the …