标签: reactstrap

使用ReactJS创建了示例应用程序，并安装了reactstrap for boostrap。我在运行正常的应用程序中使用下拉组件。代码是

<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
    <DropdownToggle caret>
      Dropdown
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem>Another Action</DropdownItem>
      <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown> 

但是我必须改变。

像目前一样，他们只传递文字

。但

我必须通过图标，标题和副标题之类的3件事

所以我可以为这种类型的自定义更改DropdownItem.js代码吗？

我必须使下拉菜单与此图像类似http://prntscr.com/f34zoo

提前致谢

我在我的项目中使用 Reactstrap 进行 Bootstrap 集成。但是，我还需要扩展Reactstrap 开箱即用的组件onClick的行为。Button为此，我制作了一个自定义NanoButton组件来重构默认组件。我就是这样称呼它的：

<NanoButton type="button" onClick={() => Router.push('/about')}>About</NanoButton>

NanoButton正如我所说，该组件将我的自定义onClick功能添加到现有Button类中：

import { Component } from 'react';
import { Button } from 'reactstrap';

class NanoButton extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }
  onClick(e) {
        var circle = document.createElement('div');
        e.target.appendChild(circle);
        var d = Math.max(e.target.clientWidth, e.target.clientHeight);
        circle.style.width = circle.style.height = d + 'px';
        var rect = e.target.getBoundingClientRect();
        circle.style.left = e.clientX - rect.left -d/2 + 'px';
        circle.style.top = …

我想为我的反应组件（Navlink）设置颜色“白色”。主页和日志链接始终是暗的:(从来没有设置白色。我使用Reacstrap，Bootstap4。我用CSS分隔js，这是我的代码：

Sidebar.js

import React from 'react';
import { NavLink as RouterNavLink } from 'react-router-dom';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink 
} from 'reactstrap';
import './Sidebar.css';

export default class Sidebar extends React.Component {
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
  collapsed: true
};
}
toggleNavbar() {
this.setState({
  collapsed: !this.state.collapsed
});
}
render() {
return (
  <div className="sidebar">
     <Navbar color="faded" light>
      <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
      <NavbarBrand href="/" className="mr-auto"></NavbarBrand>
<Collapse isOpen={!this.state.collapsed} navbar>
        <Nav navbar>
          <NavItem>
            <NavLink tag={RouterNavLink} to="/"className="test">Home</NavLink> …

我已经做了很多查找，但令人惊讶的是关于 reactstrap carousel 图像响应的文档很少。

我的 ReactStrap carousel 响应式调整大小，但图像没有。

我研究/尝试过的选项：

1. CSS 通过轮播组件本身中的 className 吗？这是我认为最好的一个，但我还没有找到可以正确调整图像大小的背景大小、高度和最大宽度的组合。

2. 源集？鉴于轮播是一个组件，我不确定如何实现这个或任何其他内联属性

3. 也许在轮播组件本身的某个地方？

4. 或者我有更好的方法来修改图像吗？

5. 或者@media 是通过 css 的答案？

`

const items = [
  {
    src: 'img1.png',
    altText: '',
    caption: ''
  },
  {
    src: 'img2.png',
    altText: '',
    caption: 'Freedom Isn\'t Free'
  },
  {
    src: 'img3.png',
    altText: '',
    caption: ''
  }
];

class HomeCarousel extends Component {
  constructor(props) {
    super(props);
    this.state = { activeIndex: 0 };
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.goToIndex = this.goToIndex.bind(this);
    this.onExiting = this.onExiting.bind(this);
    this.onExited = …

Reactstrap 没有显示模态窗口，当我点击启动按钮时，它正在淡入主页但不显示窗口。

请帮我解决这个问题。

下面是我的代码和 package.json

import React from 'react'
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class Demoextends React.Component {
  constructor(props) {
     super(props);
     this.state = {
      modal: false
    };
    this.toggle = this.toggle.bind(this);
  };
  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }
  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>Launch</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad …

是否可以在不使用状态处理程序的情况下将reactstrap UncontrolledCollapse组件的行为更改为默认打开？

我是反应的新手。在这里，我使用了一个名为 的库reactstrap，其中，

import React from 'react';
import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      popoverOpen: false
    };
  }

  toggle() {
    this.setState({
      popoverOpen: !this.state.popoverOpen
    });
  }

  render() {
    return (
      <div>
        <Button id="Popover1" type="button">
          Launch Popover
        </Button>
        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
          <PopoverHeader>Popover Title</PopoverHeader>
          <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
        </Popover> …

我正在尝试使用 React.JS 和 Reactstrap 制作 Gallery 应用程序。我正在使用该map()功能来显示卡片中的每一件艺术品。在每张卡片中，都有一个按钮可以打开一个模式以显示来自地图功能的更多数据。我的问题是当我单击按钮从任何卡片打开模式时，它会显示页面上最后一张卡片的数据。

编码：

const Artcards = ({ state, loading }, props) => {
  const { buttonLabel, className } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);



  if (loading) {
    return <h2>Loading</h2>;
  }

  return (
    <CardGroup className="CardGroup">
      {state.map((state, index) => {
        return (
          <div key={index}>
            <Card className="Card" style={{ padding: "0", height: "39rem" }}>
              <CardBody className="pt-3">
                <CardTitle className="CardTitle">
                  Art Name:
                  <h6 className="CardParagraph">{state.artName}</h6>
                </CardTitle>
                <CardSubtitle>
                  Artist Name:
                  <h6 className="CardParagraph">{state.artistName}</h6>
                </CardSubtitle>
                <CardImg …

下面是我的页面截图：

我使用 reactstrap 下拉菜单将按钮与菜单绑定。每当我单击一个按钮时，所有下拉菜单都会打开。下面的快照是下拉问题：

这是我使用的代码：

 import React, { Component } from 'react';
    import './Home.css';
    import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

    export class Home extends Component {
        constructor(props) {
            super(props);
            let $this = this;
            $this.toggle = $this.toggle.bind($this);
            $this.state =
                {
                    dropdownOpen: false
                };
        }
        toggle() {
            this.setState(prevState => ({
                dropdownOpen: !prevState.dropdownOpen
            }));
        }
    render() {
        return (
            <div className="table-div table-responsive-xl">
                <table className="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col" />
                            <th scope="col">Authentication</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.slackmembers.map((item, key) => {
                            return …