标签: react-bootstrap

我想更改切换按钮的线条颜色。我尝试更改 Navbar.Toggle 的内联样式，但没有成功。有人有主意吗？

我正在尝试添加一个进度条用作评论，这真的很奇怪，因为没有显示任何内容。

我尝试从react-bootstrap 中复制/粘贴示例，但它根本不起作用。我也尝试了material-ui，但同样的事情......

我不明白为什么，我并没有使用它作为一种奇怪的方式。

<Col>
                        <Row className="review-summary">
                            <p> 5 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 4 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 3 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 2 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 1 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                    </Col>

CSS 是：

.review-summary {
    display: inline-flex;
}

.review-summary p {
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6; …

我正在使用react-bootstrap中的工具提示覆盖，但收到错误findDOMNode is deprecated in StrictMode。根据文档，使用overlaytrigger的函数形式可以避免React.findDOMNode调用，对于那些试图遵守严格模式的人来说，但我仍然收到如下错误。

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
in div (created by Tooltip)
in Tooltip (at NavMenu.tsx:31)
in Transition (created by Fade)
in Fade (created by Overlay)
in Overlay (created by Overlay)
in Overlay (created by OverlayTrigger)
in OverlayTrigger (at NavMenu.tsx:28)
in div (created by ForwardRef)
in ForwardRef (created by Nav) …

我正在 ReactJS 中开发一个应用程序，我有以下代码：

import React, { useState, useEffect } from "react";
import {Form } from "react-bootstrap";
import Select from "react-select";

const App = () => {

    const [validated, setValidated] = useState(false);

    const [select, setSelect] = useState({
        name: "",
        category: ""
    });

    const handleChange = e => {
        const {name, value} = e.target;
        setSelect(prevState => ({
        ...prevState,
        [name]: value
        }));
    };

    const [data, setData] = useState([]);
    ...
    /* get data */
    ...

    const categories = data.map((item) => ({ value: item.id, label: …

如果状态作为 props 传递给组件，并且该组件位于 内部Tab.Pane，则当状态更改时，它不会更新其 props。

仅当我以编程方式以 250 来回切换选项卡setTimeout（或显然手动）时，它才有效，这意味着需要再次切换选项卡以重新渲染组件（因此获得更新的状态）

奇怪的是，如果我使用存储系统作为 redux 将 prop 传递给组件而不是状态，那么这是同样的事情。

我还尝试添加mountOnEnter={true} unmountOnExit={true}到窗格中，顺便说一句，它已经设置为将Tab.Container所有内容包裹在其中，但没有任何区别。

重现该行为的步骤：

1. 创建useState某种状态存储
2. 将其作为 prop 分配给组件
3. 将组件放置在react-bootstrap中 Tab.Pane
4. 尝试改变状态
5. 该组件不会反映更新的状态/存储

使用的react-bootstrap版本："react-bootstrap": "^1.5.0"

我的 Tab.Pane 示例：

<Tab.Pane eventKey="items">
   <ItemsList items={data} />
</Tab.Pane>

在这里，我需要使用自定义按钮控制轮播幻灯片，我在这个示例的帮助下实现了这一点。

这是它的代码..

import React, { useState } from "react";
import { Carousel, Button, Container, Row } from "react-bootstrap";
import Cards from "../cards";
import "./slider.css";

const Slider = () => {
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

  const onPrevClick = () => {
    if (index > 0) {
      setIndex(index - 1);
    } else if (index === 0) setIndex(2);
  };
  const onNextClick = () => {
    if (index === 2) {
      setIndex(0);
    } …

我在 Formik 中有一个复选框，其初始值是在数据库获取后确定的，该复选框填充values. 但是，如果我执行以下操作，那么尽管初始值是正确的，但我无法切换该复选框，它始终保持选中状态。

<Form.Control type="checkbox" 
              id="checkCertAgreement" 
              name="certAgreement"
              checked={values.certifyAndReview === 'Y'}
              value="Y"
              onChange={handleChange} 
              onBlur={handleBlur}   
/>

这意味着我不能使用checked但必须使用defaultChecked。但问题是，我values在初始获取中进行了 Ajax 获取useEffect。defaultChecked仅适用于第一次渲染。当第一次渲染发生时，显然values还没有加载并且values.certifyAndReview === 'Y'是错误的。所以现在我的复选框的初始值不再起作用，尽管我现在可以切换。

<Form.Control type="checkbox" 
              id="checkCertAgreement" 
              name="certAgreement"
              defaultChecked={values.certifyAndReview === 'Y'}
              value="Y"
              onChange={handleChange} 
              onBlur={handleBlur}   
/>

有什么解决办法吗？ 注意：由于某种原因，单选按钮上不会出现此问题。在单选按钮上，当我指定 时checked={values.field === 'Y'}，它既设置初始获取后值，又允许我进行切换。

所以我有一个与react-bootstrap 一起使用的面包屑组件。我需要用“>”覆盖默认分隔符。但它并没有覆盖任何东西。有人可以帮忙解决这个问题吗？

面包屑：

<Breadcrumb>
   <Breadcrumb.Item onClick={goTo('/')}>Home</Breadcrumb.Item>
   <Breadcrumb.Item onClick={goTo(`/store`)}>
      {store?.name || 'unknown'}s
   </Breadcrumb.Item>
   <Breadcrumb.Item active>{title}</Breadcrumb.Item>
</Breadcrumb>

CSS：

.breadcrumb-item+.breadcrumb-item::before { content: ">" !important; }

我正在 React 中开发一个项目，并尝试实现引导导航栏和 React-router-dom。我能够正确显示所有内容，但是所有链接都不起作用。

这是一个 codeandbox 的链接，我可以在其中复制我的问题

任何对我所缺少的内容的见解将不胜感激！

<BrowserRouter>
<div className='page-container'>
  <div className='content-wrap'>
      <div>
        <>
          <Navbar bg="dark" variant="dark">
            <Container>
              <Navbar.Brand href="#home">Shake Up Fitness</Navbar.Brand>
              <Nav className="me-auto">
                <Nav.Link as={Link} to='/'>Home</Nav.Link>
                <Nav.Link as={Link} to='/activities'>Activities</Nav.Link>
                <Nav.Link as={Link} to='/signup'>Sign Up</Nav.Link>
                <Nav.Link as={Link} to='/contact'>Contact</Nav.Link>
              </Nav>
            </Container>
          </Navbar>
        </>
        <div>
          <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/activities" element={<Activities/>} />
            <Route path="/signup" element={<SignUp/>} />
            <Route path="/contact" element={<Contact/>} />
          </Routes>
        </div>
      </div>
  </div>
<Footer />
</div>
</BrowserRouter>

我对这三个链接感到困惑，它们有哪些不同的使用方法？

• 导航链接
• 关联
• 导航链接我

他们有不同的用例吗？