标签: react-bootstrap

我想将一个<input type=file/>字段放入引导 DropDown 组件中。它渲染正确，但如果我单击它，它不会打开浏览器的本机文件选择器。

我怀疑当我单击输入组件时，输入组件可能会重新渲染，因此文件选择器没有机会运行，但据我所知，没有发生重新渲染。

请参阅下面的示例：

https://jsfiddle.net/0hmtkhpg/144/

我正在阅读有关 React 中的unknown-prop警告，特别是因为我正在使用react-bootstrap包并在那里偶然发现了它们。

我读过：“为了解决这个问题，复合组件应该“消耗”任何用于复合组件而不是用于子组件的道具”，在这里：

https://gist.github.com/jimfb/d99e0678e9da715ccf6454961ef04d1b

并给出了一个示例，说明如何使用展开运算符将变量从 props 中取出，并将剩余的 props 放入变量中。

示例代码：

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

问题在于：在给出的示例中，我不明白此代码中的“...rest”代表什么。我知道“...”=展开语法，但是“rest”这个词从哪里来，它代表什么？

我有以下反应引导选项卡：

<Tabs>
    <Tab title="first">
       <ImageGallery/>
    </Tab>

    <Tab title="second">
       <ImageGallery/>
    </Tab>

    <Tab title="third">
        <ImageGallery/>
    </Tab>
<Tabs>

该<ImageGallery/>组件使用键盘命令（例如向左和向右箭头）来更改图像。React Bootstrap 选项卡组件也使用左右箭头来更改选项卡，但是，这会导致冲突。

有没有办法禁用引导选项卡组件上的键盘输入，以便按下左/右箭头时不会更改选项卡？

我一直在更新 js 程序中的所有依赖项，但没有对我的任何组件进行任何更改。然而现在当我跑步时

npm run build

我的一个组件出现错误，其中显示：

Failed to compile.

./src/components/DonationSummaryComponent.js
  Line 14:  '_' is not defined  no-undef

Search for the keywords to learn more about each error.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of …

我正在使用react-bootstrap选项卡组件，并希望在选项卡标题中包含一个按钮。要设置标题文本，您必须将所需的文本作为 props 传递。我想在文本旁边添加一个用于删除选项卡的按钮。

我尝试传递一个返回按钮元素的函数，但选项卡标题中没有显示任何内容。

<Tab eventKey={data.name} title={data.name}>
    <Button 
         className={classes.Button} 
         variant="secondary" 
         onClick={() => removeData({ id: data.id })}
         >X</Button>
    <TemplateTabs name={data.name} />
 </Tab>

现在，上面的代码在选项卡页面内呈现按钮，而所需的位置将在选项卡标题中。模板选项卡组件是选项卡页中显示的内容。理想情况下，我正在寻找一种方法来继续使用react-bootstrap选项卡组件，但能够渲染选项卡标题和按钮以删除所述选项卡。下面是我从react-bootstrap 实现的Tab 组件的文档。如果有更多信息有用，请告诉我。

https://react-bootstrap.github.io/components/tabs/

我正在使用 React Bootstrap Carousel，我试图删除控件的上一个箭头，但我不知道如何：

<Carousel>
    <Carousel.Item>
        <img
        className="d-block w-100"
        src="1.jpeg"
        style={{borderRadius:"15px"}}
        height="500"
        alt="First slide"
        />
        <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
        <img
        className="d-block w-100"
        src="5.jpg"
        style={{borderRadius:"15px"}}
        height="500"
        alt="Third slide"
        />
        <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
        <img
        className="d-block w-100"
        src="3.jpg"
        style={{borderRadius:"15px"}}
        height="500"
        alt="Third slide"
        />
        <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </Carousel.Caption>
    </Carousel.Item>
</Carousel>

我是反应引导新手，请帮助我完成删除上一个箭头的任务。

我在这里使用react-bootstrap。我试图让工具提示始终显示，但我不太确定该怎么做。

这是我没有运气的尝试：

  <Card style={{width: '10rem'}}
          className={this.state.selected == value ? 'subItemActive' : 'subItem'}>
        <Card.Img variant="top" src={value.img}/>
        <Card.Body>
            <Card.Title> Lorem ipsum</Card.Title>
            <Card.Text>
                Lorem ipsum
            </Card.Text>
        </Card.Body>
        <ListGroup className="list-group-flush">
            <ListGroupItem>
                + {value.price},-
            </ListGroupItem>
       </ListGroup>
        <Tooltip id="overlay-example" placement={'top'}>
            My Tooltip
        </Tooltip>
    </Card>

    <Card style={{width: '10rem'}}
      className={this.state.selected == value ? 'subItemActive' : 'subItem'}>
    <Card.Img variant="top" src={value.img}/>
    <Card.Body>
        <Card.Title> Lorem ipsum</Card.Title>
        <Card.Text>
            Lorem ipsum
        </Card.Text>
    </Card.Body>
    <ListGroup className="list-group-flush">
        <ListGroupItem>
            + {value.price},-
        </ListGroupItem>
   </ListGroup>
    <Overlay show={true} placement="top">
        {props => (
            <Tooltip id="overlay-example" {...props}>
                My Tooltip …

我正在使用 React-js 应用程序 最近我在运行应用程序时遇到一些问题 npm install 没有问题

套餐版本

反应：“^16.10.2”反应引导：“^1.0.0-beta.16”

尝试了以下步骤，但没有成功

1. 删除node_modules
2. npm 缓存清除 --force
3. npm 安装

完整错误：

ERROR in ./node_modules/react-bootstrap/esm/Modal.js
Module not found: Error: Can't resolve 'dom-helpers/addEventListener' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/Modal.js 5:0-60 116:6-22
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/createWithBsPrefix.js
Module not found: Error: Can't resolve 'dom-helpers/camelize' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/createWithBsPrefix.js 4:0-44 9:32-40
 @ ./node_modules/react-bootstrap/esm/ToastBody.js
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/Modal.js
Module not …

我正在寻找一种方法来更改滚动时的导航栏颜色（CSS 中的 .bg-light），但我找不到方法。我想实现一个代码，以便每当用户从某个 y 点向下滚动时，导航栏样式就会改变；每当用户向上滚动到该点时，它就会回到原来的样式。

这是我的导航栏组件。有什么建议么？

import React, { useState} from 'react';
import './Navbar.css';
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import { Link, animateScroll as scroll } from "react-scroll";

const navbar = (props) =>  {

    return (
        <div>
        <Navbar bg="light" expand="sm" fixed="top">
            <Navbar.Brand href="#home">
                KuGPA
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav ">
                    <Nav.Link className="ml-auto"/>
                    <Link to="HOME" smooth={true} duration= {500}>
                        <Nav.Link  href="#HOME">Home</Nav.Link>
                    </Link>

                    <Link to="KUGPA" smooth={true} duration= {500}>
                    <Nav.Link  href="#KUGPA">KuGPA</Nav.Link>
                    </Link>


                    <Link to="ABOUT" smooth={true} duration= {500}>
                    <Nav.Link href="#ABOUT">About</Nav.Link>
                    </Link> …

我正在尝试向我的 React + Bootstrap 项目添加一些验证，但我无法实现这一点。根据Bootstrap Form 验证文档，我必须Form.Control.Feedback为 Form Group 组件提供一个组件。

但没有显示错误，而是检查标记，就像一切都很好。我创建了这个代码沙箱，展示了我需要实现的目标以及向我展示的内容：

为了以防万一，如果您不需要沙箱来查看错误，则这是代码：

import React, { useState } from "react";
import "./styles.css";
import { Container, Form, Button } from "react-bootstrap";
import validator from "validator";
import empty from "is-empty";

export default function App() {
  const [validated, setValidated] = useState(false);
  const [errors, setErrors] = useState({});
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = async e => {
    e.preventDefault();

    const errors = {};

    // validation …