标签: react-bootstrap

我正在使用react-bootstrap的ModalTrigger来显示一个字段繁重的模态(基于react-bootstrap的模态),这意味着向它发送一堆道具:

<ModalTrigger modal={<MyModal field1={value1} field2={value2} (more fields...)/>}>
    Click here to open
</ModalTrigger>

创建触发器的父组件具有通过道具传入的字段/值和的父组件的是组件已经它作为道具传递中,通过实际保存数据的顶层组件.两者基本上都是管道,这是一个经典的childContext场景,除了它不起作用.这是我尝试过的简化版本:

var MyModal = React.createClass({
    contextTypes : {foo : React.PropTypes.string},
    render : function() {
        return (
            <Modal {...this.props} title="MyTitle">
                <div className="modal-body">
                    The context is {this.context.foo}
                </div>
            </Modal>
        );
    }
});

var Content = React.createClass({
    childContextTypes : {foo: React.PropTypes.string},
    getChildContext : function() {return {foo : "bar"}},
    render : function() {
        return (
            <ModalTrigger modal={<MyModal/>}>
                <span>Show modal</span>
            </ModalTrigger>
        )
    }
});

模态弹出"上下文是",没有显示实际上下文.

我相信这种情况正在发生,因为发送给ModalTrigger的道具已经以某种方式呈现/装载,但我不确定为什么.据我所知,MyModal的所有者是Content组件,这意味着上下文应该没问题,但事实并非如此.

一些更多的信息:我已经尝试过通过{...this.props}并context={this.context}没有成功MyModal.另外,也许相关,ModalTrigger使用cloneElement来确保模态的onRequestHide …

每当为我加载导航栏时,我都会收到此警告.我不知道该怎么做或它意味着什么 - 我试过添加一个没有运气的父div.generateChildId根据其文档的属性仅将函数作为输入.超级混乱.

完全警告:

Warning: In the context of a `<TabContainer>`, `<NavItem>`s are given generated `id` and `aria-controls` attributes for the sake of proper component accessibility. Any provided ones will be ignored. To control these attributes directly, provide a `generateChildId` prop to the parent `<TabContainer>`.

为此,导航栏+标签完全按预期工作.它只是在控制台中不断抛出此警告.

从这里使用的示例,示例代码:

  <Tab.Container id="tabs-with-dropdown" defaultActiveKey="first">
    <Row className="clearfix">
      <Col sm={12}>
        <Nav bsStyle="tabs">
          <NavItem eventKey="first">
            Tab 1
          </NavItem>
          <NavItem eventKey="second">
            Tab 2
          </NavItem>
          <NavDropdown eventKey="3" title="Dropdown" id="nav-dropdown-within-tab">
            <MenuItem eventKey="3.1">Action</MenuItem>
            <MenuItem eventKey="3.2">Another action</MenuItem>
            <MenuItem eventKey="3.3">Something …

我需要提供名称属性才能在后端访问它。如何在react-bootstrap的Formcontrol标签中写入name属性。

我尝试用 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@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: …

我一直在尝试使用 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图书馆。

以下是我的实现：

<Accordion>
  {data.rows.map((item, index) => {
    return (
      <Card
        style={{
          border: "none",
          marginTop: "1em",
          borderBottom: "1px solid #f1f1f1",
        }}
      >
        <Card.Header
          style={{ background: "transparent", padding: "0.75em 0" }}
        >
          <Row>
            <Col lg="10" sm xs="9" style={{ alignSelf: "center" }}>
              <p
                className="cardtitle"
                style={{ fontWeight: "600" }}
              >
                {item.title}
              </p>
            </Col>
            <Col style={{ textAlign: "right" }} xs sm>
              {" "}
              <ContextAwareToggle eventKey={index}>
                +
              </ContextAwareToggle>
            </Col>
          </Row>
        </Card.Header>
        <Accordion.Collapse eventKey={index}>
          <Card.Body>
            <p className="cardcontent">{item.content}</p>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    );
  })}{" "}
</Accordion>

... …

我正在尝试使用 React-Bootstrap 获取表单输入的值。从反应中的功能组件上的反应引导表单获取表单值的标准程序是什么？

export default function SpouseForm() {
  const dispatch = useContext(DispatchContext);

  return (
    <Form>
      <Row>
        <Col xs={12} md={12} lg={{ span: 6, offset: 3 }}>
          <InputGroup className="mb-3">
            <InputGroup.Prepend>
              <InputGroup.Text>Age</InputGroup.Text>
            </InputGroup.Prepend>
            <FormControl /> <--------- I want to get this value on submit /////////////////
      </InputGroup>
        </Col>
      </Row>
      <Row>
        <Col xs={12} md={12} lg={{ span: 6, offset: 3 }}>
          <Button
            onClick={(e) => {
              e.preventDefault()
              dispatch({ type: "SPOUSE_AGE", spouseAge: e.target.value }); < ----- tried to get it here, not working
              router.push('/children')
            }}
            style={{ width: '100%' …

当我点击 时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>
////