标签: react-bootstrap

我正在使用 React-boostrap 的 Popover 和 OverlayTrigger 类。我的问题是，当我在显示时更改弹出窗口上的内容时，它会正确调整大小，但位置会出错。即使弹出窗口不再与 OverlayTrigger 对齐，它也会保持其左上角位置

这就是我要说的：

这是我在渲染函数中使用的代码，非常简单：

const popover = (
        <Popover id={this.props.htKey} >
            {this.state.content}
        </Popover>
);

return (
            <OverlayTrigger
                trigger={["hover", "focus"]}
                delayShow={200}
                placement="top"
                overlay={popover}
                onEntered={this.startExtendTimer}
                onExited={this.resetContent}
            >
                <span>test</span>
            </OverlayTrigger>


 );

调用startExtenTimer的超时会this.state.content在几秒钟后发生变化（因此导致我在图片中显示的问题）

如何在保持正确对齐的同时更改弹出窗口的内容？

我在我的反应代码中添加了 DropDownButton 我想在悬停到我的按钮时显示所有选项，但我在文档中搜索了我没有得到任何选项，下面是我的代码

<DropdownButton
                                bsSize="small"
                                className="ddown"
                                role="menuitem"
                                title="Prgoram Profile">
                                <MenuItem href="#books">Books</MenuItem>

                            </DropdownButton>

谁能告诉我该怎么做吗？我在这里检查过，但我不明白

我在我的react应用程序中使用react-bootstrap作为'atom'级组件，我想将HTML5 data-*属性传递给这些组件，即使我确实在我的react-bootstrap组件中传递它们（在我的例子中是按钮）当我检查它们时没有出现，因此我无法使用它们

现在有办法做到这一点吗？我已经阅读了他们的文档，但不知道如何做到这一点？

当我们在创建新的 React 应用程序时使用 create-react-app 。它创建多个文件。其中index.html是渲染的html应用程序，其中根据react应用程序App.jsx放置多个jsx元素我很好奇导入google字体、bootstrap、jquery和其他不同外部插件的最佳方法是什么？

据我研究，有两种导入外部模块的方法。例如。如果我们考虑从 cdn 导入 bootstrap：https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js

然后，导入的一种方法是将其放在 public/index.html 中：

# Rest of the index.html code
<div id="root"></div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
# Rest of the index.html code

另一种方法是使用安装 bootstrap npm i bootstrap@4.3.1 --save，然后将其作为 import 放入 src/index.js 。

上面的东西可以应用到多个地方。比如说，我们必须导入 popper.min.js 或 jquery.js 或导入 css 字体。哪个更好？将其放在index.html 中还是index.js 中？另外，将它放在两个不同的地方的主要区别是什么？

因为<Card.Body>似乎有一个名为which 类型且默认为 的参数。aselementType<div>

https://react-bootstrap.github.io/components/cards/#card-body-props

现在<Card.Text>默认会<p>在我的网站上产生警告，因为我<div>在其中嵌套了元素<Card.Text>

警告：validateDOMNesting(...)：不能显示为<p>

所以基本上有两个问题：

1. 如何更改/设置元素类型Card.Body？以下尝试没有反映在生成的 html 中（使用 Chrome DevTools 检查）：<Card.Body as="p">...</Card.Body>这也没有<Card.Body as="<p>">...</Card.Body>

2. 如何更改 上的元素类型<Card.Text>？

这就是我的组件的样子

import React from "react"
import { Link } from "gatsby"
import Img from "gatsby-image"
import Card from "react-bootstrap/Card"
import Tags from "./tags"
import TimeToRead from "./time-to-read"

const Post = ({ title, slug, date, body, fluid, tags, timeToRead }) => { …

我在从React Bootstrap 中获取onChange事件时遇到问题。FormControl

const textChangeHandler = (e) => {
   console.log(e);
};

<InputGroup size="sm" className="mt-2">
    <InputGroup.Prepend>
        <InputGroup.Text onChange={textChangeHandler}>
            #
        </InputGroup.Text>
    </InputGroup.Prepend>
    <FormControl />
</InputGroup>

当我在文本字段中输入内容时，它不会在控制台中记录更改。我在这里做错了什么？

我正在尝试使用 React Bootstrap 创建一个徽标以与我的 React 应用程序上的导航栏一起使用，并且我已使用文档作为指南。但是，当使用 localhost://3000 查看页面时，会显示以下内容：

我究竟做错了什么？我什至尝试将示例代码片段从文档站点复制到我的项目中，并且呈现相同的内容。但是，我打开 svg 文件时，Chrome 本身没有任何问题。这是我的 App.js 代码：

import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Container from 'react-bootstrap/Container'
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

class App extends React.Component {
  constructor(props) {
    super();
    this.state = {
      title: "Danny's Website",
      headerLinks: [
        { title: 'Home', path: '/' },
        { title: 'Projects', path: '/projects' },
        { title: 'Documents', path: '/documents' },
        { …

我正在尝试为我的项目实现 React Modal。我想将模态标题和模态按钮居中。我尝试使用 flex 和 just-content-center 但它不起作用。任何建议都很有价值。

<Modal show={modalShow} onHide={this.handleClose} aria-labelledby="contained-modal-title-vcenter" centered>
    <Modal.Header closeButton>
        <div className="d-flex justify-content-center">
            <Modal.Title>{isVerified?"Submitted succesfully":"Failed to submit"}</Modal.Title>
        </div> 
    </Modal.Header>
         <Modal.Footer>
    <Button variant={`${isVerified == false?"danger ":"success"}`} onClick={this.handleClose} centered>
        {isVerified?"Ok":"Try again"}
    </Button>
    </Modal.Footer>
</Modal>

我研究了很多有关使用按钮作为链接的主题，但没有找到适合我的解决方案 - 我需要使用 React bootstrap 按钮在新选项卡中打开某个页面。

<Button onClick={() => onClickOpenVacancy(id)}>

React bootstrap 提供了一个属性“href”，但没有信息如何在新选项卡中打开。请问有什么建议吗？

我想在我的项目中使用React Bootstrap Table，但出现以下错误。

未捕获的 ReferenceError：参数未在 Object../node_modules/react-bootstrap-table2-toolkit/lib/src/search/SearchBar.js 中定义

以下是从他们的官方网站引用的导入内容。

import ToolkitProvider, {Search} from 'react-bootstrap-table2-toolkit';

const {SearchBar} = Search;

在此导入中无法找到搜索。