标签: react-bootstrap
如何让我的 React Bootstrap 卡水平排列并等距排列（如果可能，也可以响应）
我正在使用 Reactstrap 并动态显示我的卡片，无论我尝试什么，它们似乎都想垂直堆叠。这是呈现它们的组件：
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { CardDeck } from 'reactstrap';
import { fetchMerch } from '../actions/fetchMerchAction';
import { fetchUniqueMerch } from '../actions/fetchUniqueMerchAction';
import ItemCard from './ItemCard';
import shortid from 'shortid';
class ShopHome extends Component {
componentDidMount() {
this.props.onInitMerch();
}
showItemDetailHandler = (id) => {
// console.log("*",id);
this.props.onInitUniqueMerch(id);
this.props.history.push(`detail/${this.props.id}`)
}
render() {
let cards;
if ( this.props.cards ) {
cards = Object.values(this.props.cards).map( card …推荐指数
解决办法
查看次数
为什么 react-bootstrap 不使用我的自定义样式？
我正在尝试为我的 API 制作一个前端，并且我正在使用 ReactJS，以及 react-bootstrap。我一直讨厌 bootstrap 如何只为其按钮设置颜色，而在 vanilla html css 中更改按钮颜色很容易。
但是，我的react-bootstrap/Button实例似乎从未真正使用我分配给它的自定义 CSS。这是我试图应用于按钮的样式，存储在styles/style.css
.accent {
background-color: '#666a86';
border-color: '#FFF'
}
.accent:hover {
background-color: '#95b8d1';
}
我将此 CSS 文件导入到我的组件中，如下所示：
import '../styles/style.css'
请注意，该组件存储在 /components/ComponentName.jsx 中。我尝试使用 将类分配给 Button 组件className，bsClass并且两者都没有任何区别。我能够设置按钮样式的唯一方法是内联：
<Button style={{color:'#FFF'}}/>
为什么我的按钮根本没有样式？它仍然停留在默认的蓝色引导按钮上。
更新： 在我的 CSS 文件中导入引导 CSS 确实有效：
.accent {
background-color: #666a86;
border-color: #FFF
}
.accent:hover {
background-color: #95b8d1;
}
@import '~bootstrap/dist/css/bootstrap.css';
推荐指数
解决办法
查看次数
React bootstrap - 无效的钩子调用
我正在使用BootstrapwithReactJS来学习后者。
我想在我的应用程序中显示 Bootstrap 导航栏。
我的代码如下：
应用程序.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";
function App() {
return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">
<img
alt=""
src="####"
width="30"
height="30"
className="d-inline-block align-top"
/>
// {' React Bootstrap'}
</Navbar.Brand>
</Navbar>
</div>
);
}
export default App;
索引.html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<!-- BOOTSTRAP -->
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" …推荐指数
解决办法
查看次数
向 React Bootstrap 下拉菜单添加图标
我正在尝试向我的反应下拉按钮添加一个图标，如下面的按钮所示。
我找不到用我正在使用的 react bootstrap 包来实现这个的方法。
https://react-bootstrap.github.io/
我尝试使用普通的引导程序 4 来解决这个问题。但是发现它需要jquery来打开下拉菜单。如何在我的 React Bootstrap 下拉菜单中添加图标？
我的代码
<DropdownButton id="example-month-input-2" title={this.state.weekselectedType}>
<Dropdown.Item onClick={() => this.changeWeekValue('a')}>A</Dropdown.Item>
<Dropdown.Item onClick={() => this.changeWeekValue('b')}>B</Dropdown.Item>
<Dropdown.Item onClick={() => this.changeWeekValue('c')}>C</Dropdown.Item>
</DropdownButton>
我设法使用以下 css 删除了默认的下拉图标
.dropdown-toggle::after {
display:none !important;
}
推荐指数
解决办法
查看次数
@testing-library/react TDD，react-bootstrap：这种测试有用还是只是时间宽松
我尝试用 TDD 视图编写代码，我一直遇到同样的问题，我应该测试什么，不应该测试什么，目标是使用 TDD 制作一个基于 React-bootstrap 的导航栏，我的组件将只是一个具有较少属性的包装器，以使其变得简单，我从react-bootstrap中Navbar的品牌子组件开始。最终目标是测试反映用户应该测试的内容，例如导航中存在具有良好 src 和 alt 属性的品牌徽标 img。
这些测试有趣还是应该避免？
我的测试
import React from 'react';
import { render } from '@testing-library/react';
import BrandNav from './BrandNav';
test('testing brand navigation', () => {
const altProp = 'message to show if image unavailable',
srcProp = 'relativeFilePath',
host = window.location;
const { getByAltText } = render(<BrandNav alt={altProp} src={srcProp} />);
const brandLogo = getByAltText(altProp);
expect(brandLogo.src).toEqual(`${host}${srcProp}`);
});
我的组件
import React from 'react';
import { Navbar } from 'react-bootstrap';
const BrandNav = ({ alt, …推荐指数
解决办法
查看次数
如何使用打字稿扩展react-bootstrap组件？
我正在使用react-bootstrap@1.0.0-beta.14并尝试Button使用react-bootstraps创建自定义组件Button，添加另一个道具，isLoading. 由于react-bootstrap类型的定义方式，我最终导入了一些帮助器类型并复制了react-bootstrap类型的一部分：
import React from 'react'
import { Button as Btn, ButtonProps } from 'react-bootstrap'
import { BsPrefixProps, ReplaceProps } from 'react-bootstrap/helpers'
interface Props {
isLoading?: boolean
}
type BtnProps<As extends React.ElementType = 'button'> = ReplaceProps<
As,
BsPrefixProps<As> & ButtonProps
>
export const Button: React.FC<BtnProps & Props> = ({ isLoading, disabled, ...props }) => {
return <Btn {...props} disabled={isLoading || disabled} />
}
这几乎有效。我得到的错误告诉我refprop 类型是错误的：
属性“ref”的类型不兼容。
...
类型“(instance: …
推荐指数
解决办法
查看次数
如何从 React Bootstrap 中的下拉导航项中删除插入符号
我一直在尝试使用 bootstrap 4 从 NavDropdown 组件中删除插入符号并做出反应，但是我没有运气。这是我的反应和CSS，不知道出了什么问题。谢谢。
<Navbar expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<NavDropdown title="ENGAGEMENT" id="basic-nav-dropdown" show={false} className="noCaret">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
.caret {
display: none !important;
}
.navbar .dropdown-menu:after{
display:none !important;
}
.dropdown-toggle.noCaret:after {
display: none !important;
推荐指数
解决办法
查看次数
如何在反应应用程序中动态更改主题
我正在尝试使用按钮或切换按钮（我稍后会决定）将我的反应应用程序的主题从浅色更改为深色（反之亦然）。事实是：我直接从 bootswatch 导入主题的 .css（我目前使用“Minty”作为浅色主题，我想使用“Darkly”作为深色主题（https://bootswatch.com/））。目前我只发现有 ThemeProvider 组件，但它需要主题作为 .js 文件，您必须在其中导出您想要的内容（我不能这样做，因为我只有 .css）。我还在 github 上找到了一个 ThemeSwitcher（https://github.com/raythird/react-bootstrap-theme-switcher），但它似乎使用的是 bootstrap v3，而我实际上需要 v4。Reddit 上还有一个帖子建议将它们导入公共文件夹并更改它们（https://www.reddit.com/r/reactjs/comments/9lzm8g/react_switching_themes_css/），但我认为这不是一个好主意实践。有谁能够帮助我？
编辑：我尝试了reddit解决方案：现在它正在改变主题，但一瞬间我绝对可以看到一些我根本不喜欢的纯html东西。这是我的代码
import React, { useState } from "react";
import ReactDOM from "react-dom";
import Tabs from "./Tabs";
import "react-toastify/dist/ReactToastify.min.css";
import { Helmet } from "react-helmet"
export const Application = () =>{
const [theme, setTheme] = useState(true)
const changeThemeHandler = (event) => {
event.preventDefault();
setTheme(!theme)
}
return(
<>
<button onClick={(event) => changeThemeHandler(event)}>Change Theme</button>
<Helmet>
<link rel="stylesheet" href={`${process.env.PUBLIC_URL}/${theme ? 'lightbootstrap.min.css' : …推荐指数
解决办法
查看次数
在 React-bootstrap 中单击 Dropdown.Item 后防止关闭
当我点击 时Dropdown.Item，Dropdown.Menu隐藏。我想防止这种情况发生，即Dropdown.Menu单击后保持打开状态，只有在外部单击时才将其关闭 Dropdown 。我发现了类似的问题，但在使用 jQuery 的原始引导程序中存在。如何在react-bootstrap中实现这个？谢谢
////
<Dropdown.Menu>
<Dropdown.Item>- Pending</Dropdown.Item>
<Dropdown.Item>- Completed</Dropdown.Item>
<Dropdown.Item>- Cancelled</Dropdown.Item>
</Dropdown.Menu>
////
推荐指数
解决办法
查看次数
React-Bootstrap 无效表单反馈始终可见如何测试？
我无法使用 React-bootstrap 测试表单的正确验证。\n我想看到，当输入模式无效时，一旦验证表单，就会显示无效的反馈文本。
\n带有测试的工作codesandbox：https://codesandbox.io/s/flamboyant-cerf-7t7jq
\nimport React, { useState } from "react";\n\nimport { Form, Button, InputGroup } from "react-bootstrap";\n\nexport default function App(): JSX.Element {\n const [validated, setValidated] = useState<boolean>(false);\n\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n setValidated(true);\n };\n\n return (\n <Form\n className="col-12 col-lg-5 trans-form"\n noValidate\n validated={validated}\n onSubmit={handleSubmit}\n >\n <InputGroup className="my-2">\n <InputGroup.Prepend>\n <InputGroup.Text>Receiver Public Key</InputGroup.Text>\n </InputGroup.Prepend>\n <Form.Control\n role="textbox"\n className="text-truncate rounded-right"\n type="text"\n pattern="[A-Za-z0-9]{5}"\n required\n />\n <Form.Control.Feedback\n className="font-weight-bold"\n type="invalid"\n role="alert"\n >\n Length or format are incorrect!\n </Form.Control.Feedback>\n </InputGroup>\n\n <Button\n role="button"\n …forms validation jestjs react-bootstrap react-testing-library
推荐指数
解决办法
查看次数
标签 统计
react-bootstrap ×10
reactjs ×8
javascript ×3
bootstrap-4 ×2
jestjs ×2
caret ×1
dropdown ×1
ecmascript-6 ×1
forms ×1
frontend ×1
navbar ×1
reactstrap ×1
tdd ×1
typescript ×1
validation ×1