标签: react-bootstrap

我想更改选项卡而不单击 NavItem evtKey="x"

如果我有一个像这样的 TabContainer ：

      <Tab.Container id="tabcontainer" defaultActiveKey="a">
          <Tab.Content animation>
            <Tab.Pane eventKey="a">
              <ComponentA />
            </Tab.Pane>
            <Tab.Pane eventKey="b">
              <Componentb />
            </Tab.Pane>
          </Tab.Content>
          <Nav stacked bsStyle="pills" pullLeft>
             ... NavItems ...
          </Nav>
      <Tab.Container>

我想知道我该怎么做：

    eventHandler(){
       changeToTab("b")
    }

在组件 A 内。

我正在尝试设计 React Bootstrap 导航栏的样式。我能够成功地设置非活动选项卡的样式，但是，我似乎无法到达活动选项卡。我的实时样式是一个单独的 .scss 文件。这是相关的片段：

.navitem {
  a {
    font-size: 12px;
    color: #000;
    background-color: #e7e7e7;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-bottom-color: #357ebd;
    border-bottom-style: solid;
    border-radius: 0px !important;
    display: inline-block;
    border-bottom-width: 2px;
  }
  flex: 1;
}

.navitem.active {
  background-color: #777777;
}

创建活动 Bootstrap 组件后，其 HTML 如下所示：

<li role="presentation" class="Preview-navitem--19fA7 active"><a role="button" href="#">Preview</a></li>

这是 React render() 方法中的 HTML：

<Nav
            className={styles.navbar}
            bsStyle="pills"
            activeKey={this.state.value}
            onSelect={this.handleSelect}
          >
            <NavItem className={styles.navitem} eventKey="1">Preview</NavItem>
            {navItem}
</Nav>

所以，基本上，我可以设置 .navitem 的样式，但不能设置 .active 的样式。知道我怎样才能做到这一点吗？

我正在尝试使用 React 设置一个新项目，并且正在考虑用 TypeScript 替换 PropTypes。

但我想知道我是否会遇到集成问题。

例如：

• 将 Redux（或react-redux）与 TypeScript + React 结合使用
• 集成不是用 TypeScript 创建的组件的问题
• 类似库的问题 react-bootstrap

我主要关心的是从 TypeScript 导入非 TypeScript 代码。

任何线索或经验？

我们有一个按钮，我们希望根据某些条件启用或禁用。此外，我们希望按钮在禁用时的悬停效果显示工具提示，解释其禁用原因。

目前，我们有这样的事情：

export class NextButton extends React.Component {
    makePopover () {
        return (
            this.props.someCondition && <Popover>Please enter a title.</Popover>
        )
    }

    render () {
        return (
            <div>
                <OverlayTrigger placement='top' overlay={this.makePopover()}>
                    {/* wrap this in a div so when the button is disabled, the popover still works */}
                    <div>
                        <Button
                            onClick={() => this.props.goToNextPage()}
                            disabled={this.props.someCondition}
                        >
                            Next
                        </Button>
                    </div>
                </OverlayTrigger>
            </div>
        );
    }
}

现在，如果我们仔细查看该makePopover函数，如果someCondition为 false，Popover则不会呈现并OverlayTrigger在返回任何没有 id 的内容时抛出错误。

因此，为了解决这个问题，我们尝试了：

this.props.someCondition ? <Popover>...</Popover> : <span>...</span> …

我有一个手风琴，当我点击标题时会打开。我还添加了一个人字形，当它打开时我想改变方向。我不确定如何使用手风琴来做到这一点，因为我不会根据按钮点击来改变状态。我的手风琴代码：

    <Accordion defaultActiveKey="0">
      <Card>
        <Accordion.Toggle as={Card.Header} eventKey="1">
          Roll History <FaChevronDown />
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="1">
          <Card.Body>{historyText}</Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion> 

当手风琴打开时，我想改为显示 FaChevronUp？

我只是想React-Boostrap和React-Router并在一起运行。我使用Create React App创建了一个简单的 shell。

这是我的代码，它与实际工作很好 React Router

    import React, { Component } from "react";
    import { RouteComponentProps, useHistory } from 'react-router';
    import {
        BrowserRouter as Router,
        Switch,
        Route,
        useParams,
        BrowserRouter
    } from "react-router-dom";


    import 'bootstrap/dist/css/bootstrap.min.css';
    import {
        Nav,
        Navbar
    } from "react-bootstrap";


    function Navigation() {

        return (
            <BrowserRouter >
                <div>
                    <Navbar bg="light" expand="lg">
                        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav">
                            <Nav className="mr-auto">
                                <Nav.Link href="/">Home</Nav.Link>
                                <Nav.Link href="/about">About</Nav.Link>
                                <Nav.Link href="/users/1">/users/1</Nav.Link>
                                <Nav.Link href="/users/2">/users/2</Nav.Link>
                                <Nav.Link href="/users2/1">/users2/1</Nav.Link>
                            </Nav>
                        </Navbar.Collapse> …

我正在尝试向活动选项卡添加自定义样式，但不知道如何切换活动选项卡的样式类。

以下是我的代码：

import React, { useState } from "react";
import "./styles.css";
import { Container, Row, Col, Tab, Nav } from "react-bootstrap";

export default function App() {
  const [key, setKey] = useState("first");

  const ActiveStyle = {
    textAlign: "center",
    background: "white",
    borderRadius: "2em",
    padding: " 0.3em 1.5em",
    letterSpacing: "0.2em"
  };

  const inActiveStyle = {
    ...ActiveStyle,
    background: "transparent",
    "border-color": "transparent",
    color: "inherit"
  };

  return (
    <div className="App">
      <Container style={{ width: "auto" }}>
        <Tab.Container activeKey={key} onSelect={key => setKey(key)}>
          <Row style={{ padding: "1em 1em", background: …

我正在制作一个非常简单的 reactjs 应用程序，我需要在将鼠标悬停在文本上时显示工具提示。

    <OverlayTrigger
      placement="bottom"
      overlay={
        <Tooltip
          id="tooltip"
          style={{ width: "100%", wordBreak: "break-all" }}
        >
          thisisalongstringthanusualhencenotfilledincontiner
        </Tooltip>
      }
    >
      <span>Hover over this text</span>
    </OverlayTrigger>

在我遇到使工具提示内容适合容器的问题之前，我已经使用了wordBreak: "break-all"它，因此它适合容器框。

这里的工作示例...

但是现在我得到了工具提示应该显示水平长的要求，现在你可以看到它正在断字并且容器是垂直的并且宽度固定..但是我怎样才能改变工具提示容器的宽度来使文本水平长在一行中？？

从上面的代码中，文本thisisalongstringthanusualhencenotfilledincontiner应该显示在一行中，并带有扩展的工具提示..

请帮助我更改反应引导程序中工具提示容器的宽度..

我正在尝试将 react-bootstrap navbar-toggler-icon 更改为 font-awesome 图标并更改图标颜色。

详细图片：

我正在尝试向我的 React 应用程序项目添加背景图像。我想在所有页面中显示图像，但对于每个页面，图像都没有全屏显示，有一个空白区域。这是 App.js 的 css

.background-image {
  background-image: url(./assets/space-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;

}

我的 App.js 就像：

render() {
    return (
        <Router>
          <Container className="p-0 background-image" fluid={true}>
            <Navbar bg="transparent" expand="lg">
              <Navbar.Brand style={{color: 'white'}} >Schoninger Jimmy</Navbar.Brand>
              <Navbar.Toggle className="border-0" aria-controls="navbar-toggle"/>
              <Navbar.Collapse id="navbar-toggle">
                <Nav className="ml-auto">
                  <Link className="nav-link" to="/"  style={{color: 'white'}} >Home</Link>
                  <Link className="nav-link" to="/about" style={{color: 'white'}}>About</Link>
                  <Link className="nav-link" to="/contact" style={{color: 'white'}}>Contact</Link>
                </Nav>
              </Navbar.Collapse>
            </Navbar>

            <Route path="/" exact render={() => <HomePage title={this.state.home.title} />} />
            <Route path="/about"  render={() => …