标签: reactstrap

我有一个使用 reactstrap 的导航栏，并希望合并 react-router。在尝试失败后，我在这里找到了解决方案。

但是我不明白语法：

我有一个<NavLink>来自 React-Router 和一个来自 Reactstrap 的导航栏。

而不是将 Reactstrap 包装在 React-Router 中（这会引发警告）：

 <NavLink to="/">
   <NavbarBrand className="mx-auto" to="/" tag={ NavLink }>
      My Site
   </NavbarBrand>
 </NavLink>

这是语法：

   <NavbarBrand className="mx-auto" to="/" tag={ NavLink }>
      My Site
   </NavbarBrand>

什么是标签属性？它有什么作用？

谢谢大家！

columns我的表格组件数组中有一个列react-table，需要在单元格内渲染一个下拉按钮，以允许用户将该行数据渲染到另一个模式组件中进行编辑。

我正在使用dropdownToggles一个布尔数组 - 设置为与表中的行数相同的长度 - 跟踪行中的哪个下拉列表应设置为isOpen。

无论如何，我是否可以访问 中数据的行索引，columns以便我可以将索引传递给isOpen={dropdownToggles[i]}和toggle={() => setDropdownToggles(handleDropdownToggles(i))} ？

import React, { useState, useEffect, useMemo } from "react";

import { useSelector } from "react-redux";

import { Dropdown } from "reactstrap";

const Table = () => {
    const { tasks } = useSelector(state => state.data);
    const numTasks = tasks.data.length;

    const [dropdownToggles, setDropdownToggles] = useState([]);

    useEffect(() => {
        setDropdownToggles(new Array(numTasks).fill(false));
    }, [numTasks]);

    const data = useMemo(() => tasks.data, …

我正在使用 React 和 Reactstrap 创建一些模板。这就是我的代码现在的样子：

import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';

const styles = {
  container: {

  },
  right: {
    height: window.innerHeight, // I want to change this
    padding: 0,
    margin: 0,
    overflow: 'hidden',
    backgroundColor: 'yellow'
  },
  left: {
    overflowY: '100%',
    padding: 0,
    height: window.innerHeight,
    paddingBottom: '50px',
    backgroundColor: 'white'
  },
  row: {
    marginBottom: 0
  }
}

class MainArea extends Component {
  constructor(){
   super();
  }
  render() {
   return (
     <Container fluid>
      <Row> …

我正在开发一个react应用程序并使用reactstrap。

我正在使用reactstrap的工具提示组件，它需要一个目标属性，即目标元素ID的值。这个id是动态生成的，似乎reactstrap工具提示不喜欢它。

组件看起来像：

MovieCard.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Col, Card, CardImg, CardBody, CardTitle, CardSubtitle, CardText, Button, Tooltip } from 'reactstrap';
import { LimitedTextTitle } from '../custom-styled/CustomStyledComponents';

class MovieCard extends Component {  

  constructor (props) {
    super(props);
    this.state = {
      open: false
    };
    this.toggle = this.toggle.bind(this);
  }

  toggle () {
    this.setState({
      open: !this.state.open
    })
  }

  render () {
    const { imdbID, Title, Year, Rated, Plot, Country, Poster } = this.props.movie;

    return (
  <Col …

我是新手.我正在尝试使用bootsrap 4创建一个react应用程序.我正在使用reactstrap,接下来的步骤:

create-react-app my-app

npm install bootstrap --save

npm install --save reactstrap@next react react-dom

在src/index.js文件中导入Bootstrap CSS:import'bootstrap/dist/css/bootstrap.min.css';

但是,当我启动我的应用程序时,我收到此错误:

编译失败.

./src/index.js找不到模块:无法解析'D:\ React\my-app2\src'中的'bootstrap/dist/css/bootstrap.css'

我曾经在CDN中使用bootstrap,你知道,在我的html页面中, 链接rel ="stylesheet"...等和脚本src =""......等.但是使用reactstrap,js文件在哪里？(jquery,popper,bootstrap)(当我运行npm install bootstrap时,它们都在一起--save？)

谢谢

我想从我使用 Reactstrap 创建的表单中获取 JSON，以便能够将其发布到我的后端。

我找到了这个例子。我想使用 Reactstrap，所以我无法将 anonSubmit={this.handleSubmit}放在Form组件上。这就是为什么我想用Form经典form标签替换组件，但它FormData仍然是空的。

这是我的代码。

我感谢每一个建议。

你好

我正在设计一个 MERN 项目，我想更改 Reactstrap ( https://reactstrap.github.io/ ) 用于我的 React 前端的默认字体。我找到了一些更改默认 Bootstrap 4 字体的答案，但我不确定如何（或是否）将这些应用于 Reactstrap —— 非常感谢任何帮助或线索！

尝试使用标签和类名让图像显示在 Carousel 的幻灯片中。我将图像保存在与 Slider.js 文件相同的文件夹中。我已将 items 数组中的默认 id 属性更改为 source 并将键更改为 item.src 但仍然没有乐趣。我在屏幕上看到小图像符号，好像它知道它正在尝试在图像上显示，但不是我想要的实际图像，如果这有意义的话

import React, { Component } from "react";
import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from "reactstrap";

const items = [
  {
    src: "slider1.jpeg",
    altText: "Slide 1",
    caption: "Slide 1"
  },
  {
    src: "slider2.jpeg",
    altText: "Slide 2",
    caption: "Slide 2"
  },
  {
    src: "slider3.jpeg",
    altText: "Slide 3",
    caption: "Slide 3"
  }
];

class Slider extends Component {
  constructor(props) {
    super(props);
    this.state = { activeIndex: 0 };
    this.next …

我有一个带有以下输入元素的反应组件：

import React, {
    Component
} from 'react';
import {Input } from 'reactstrap';     
constructor(props) {
    super(props)   
    this.test = React.createRef();       
}

render() {
    console.log(this.test.current)
    return (
         <Input ref={this.test} defaultValue = "This is the default" />
    )
}

我想从 ref {this.test} 获取值 Prop 但是，当我控制台日志时，我收到以下输出。

Input {props: {…}, context: {…}, refs: {…}, updater: {…}, getRef: ƒ, …}
context: {}
focus: ƒ ()
getRef: ƒ ()
props: {defaultValue: "This is the default", onChange: ƒ, type: "text"}
refs: {}
state: null
updater: {isMounted: ƒ, enqueueSetState: …

我还需要使用“ESC”键关闭模态，此时它正在关闭“CLOSE”和“CONFIRM”按钮。我正在使用 reactstrap，react hooks。键盘 {show} 和 handleClose 它不起作用。

这是代码：

const DeleteUserModal = props => {
    const { user, show } = props;

    const deleteUser = async () => {
        await props.removeUser(user);
        props.onCloseModal();
    };

    const handleKeyPress = target => {
        if (target.charCode === ENTER_KEY) {
            deleteUser();
        }
    };
    


    return (
        <div onKeyPress={handleKeyPress}>
            <Modal isOpen={show} toggle={props.onCloseModal}  >
                
                <ModalHeader toggle={props.onCloseModal}>
                    <IntlMessages id="modal.delete.user.title" />
                </ModalHeader>

                <ModalBody>
                    <IntlMessages id="modal.delete.user.description" />
                </ModalBody>

                <ModalFooter>
                    <Button className="cancel" onClick={props.onCloseModal}>
                        <IntlMessages id="modal.common.cancel" />
                    </Button>
                    <Button className="action" onClick={deleteUser}>
                        <IntlMessages id="modal.common.ok" />
                    </Button> …