标签: reactstrap

我正在尝试在 create-reat-app 中使用 react-router 和 reactstrap。在路由页面中，我需要使用 reactstrap 的状态，因此我将路由器从变量转换为类。我收到此警告：警告： validateDOMNesting(...): <a> cannot appear as a descendant of <a>. 我不知道该怎么做？，我需要使用 reactstrap 来设置路由器导航的样式，所以我做了你在下面看到的。

由于很多原因，这不起作用：

<NavLink componentClass={Link} href="/contact" to="/contact" active={location.pathname === '/contact'}>anywords</NavLink>

<Navbar  dark id="RouterNavbar" expand="md">
          <NavbarBrand id="NavBrand"href="#x"><ul>(a bunch of li not relevant)</ul></NavbarBrand>
<NavbarToggler id="NavBarToggler"  onClick={this.toggle1.bind(this)}  />
          <Collapse  isOpen={this.state.isOpen1}  navbar>
            <Nav   className="ml-auto"  navbar>
            <NavItem>
                <NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>
              </NavItem>
(then just more of the above)

除了几个 li 随机靠近彼此，我有时不得不刷新页面而不是正常行为（自动刷新）和我在控制台中收到的警告消息，没有什么不好的事情发生，但是当我读到这个的时候问题我发现我不应该这样做。

我正在创建一个React应用程序,Next.js并尝试使用提供的组件reactstrap.

我似乎遇到了这个问题似乎涉及进口名为CSS文件bootstrap/dist/css/bootstrap.min.css作为reactstrap指导说的事情.

我看到的错误是 Error in bootstrap/dist/css/bootstrap.min.css Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type.

有谁知道我必须做些什么来使这项工作正常？我是一名新的网络开发人员,如果我遗漏任何明显的事情,请对不起

谢谢!

由于create-react-app隐藏Webpack配置而不必使用eject,如果我想使用像reactstrap或react-bootstrap之类的东西,我应该弹出还是我会没有弹出而没有弹出？

只是想eject知道他们需要什么时候才能使用他们需要的东西？在我的应用程序的这一点,我只是原型,但它将进一步与更多的依赖和诸如此类的东西.

我为reactjs找到了两个不同的引导程序

1. npm install --save reactstrap react react-dom
2. npm install react-bootstrap引导程序

两者的基本区别和主要区别是什么？

我一直在寻找如何结合以下内容:ReactJS + ReactStrap和CSS-Modules(react-css-modules和/或boostrap-css-modules),但是,我似乎无法将这三个模块拼凑在一起来实现期望的效果(或在线找到任何帮助).

这背后的想法是让ReactStrap元素可用,即:

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

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

但也允许我使用CSS模块,最终结果类似于:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './mybutton.css';

class Test extends React.Component {
    render () {
        return <Button color='danger' styleName='myButton'>Danger</div>;
    }
}

export default CSSModules(Table, styles);

mybutton.css可能是这样的:

.myButton {
  composes: btnPrimary from "bootstrap-css-modules/css/buttons.css";
  background-color: dodgerblue;
  border-color: dodgerblue;
}

我也在使用Webpack,所以我甚至不知道从哪里开始使用Webpack.

编辑:

我使用它的方式如下:

npm install --save bootstrap@4.0.0-alpha.6

npm install --save reactstrap react-addons-transition-group …

如何在reactstrap Dropdown中设置所选项目？

有下拉列表的示例:https://reactstrap.github.io/components/dropdowns/

当我在下拉列表中选择项目时,它不会显示.

*******************工作方案*****************************

import React from "react";
import {ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle} from "reactstrap";
import superagent from "superagent";

class BootstrapSelect extends React.Component {

    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.changeValue = this.changeValue.bind(this);
        this.state = {
            actions: [],
            dropDownValue: 'Select action',
            dropdownOpen: false
        };
    }

    toggle(event) {

        this.setState({
            dropdownOpen: !this.state.dropdownOpen
        });
    }

    changeValue(e) {
        this.setState({dropDownValue: e.currentTarget.textContent});
        let id = e.currentTarget.getAttribute("id");
        console.log(id);
    }


    componentDidMount() {
        superagent
            .get('/getActions')
            .type('application/json; charset=utf-8')
            .end(function (err, res) {
                console.log(res.body);
                this.setState({actions: res.body});
            }.bind(this)); …

这是全新的安装 - 我没有对警报组件进行任何转换

复制代码很简单

import React from "react";
import { Alert } from "reactstrap";

export const Index = () => {
   return (
      <div>
         <Alert color='primary'>This is a primary alert — check it out!</Alert>
      </div>
   );
};

错误消息：请更新以下组件：过渡

如何一起更新Transition或消除它？

我正在尝试将本地图像导入 reactjs。但它不起作用。我正在使用 reactstrap 制作旋转木马。

这是错误

找不到模块：无法解析“C:\Users\adity\Desktop\foodcubo-dev\project\src\Layouts\header”中的“../../assets/img-3.jpg”

我尝试使用导入方法导入图像，尽管图像在资产中可用。我想进口没问题。问题可能与渲染有关。我不知道。

这是我的代码。

头文件.js

import React, { Component } from 'react';
import imgone from '../../assets/img-1.jpg'
import imgtwo from '../../assets/img-2.jpg'
import imgthree from '../../assets/img-3.jpg'

import {
  Carousel,
  CarouselItem,
  CarouselIndicators,
  CarouselCaption
} from 'reactstrap';

const items = [
    {
    src: {imgone},
    altText: 'Slide 1',
    caption: 'Slide 1'
  },
    {
    src: {imgtwo},  
    altText: 'Slide 2',
    caption: 'Slide 2'
  },
    {
    src: {imgthree},
    altText: 'Slide 3',
    caption: 'Slide 3'
  }
];

class Header extends Component {
  constructor(props) {
    super(props); …

"@popperjs/core": "^2.6.0",
"@testing-/jest-dom": "^5.11.9",
"@testing-/react": "^11.2.3",
"@testing-/user-event": "^12.6.2",
"bootstrap": "^4.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"react-transition-group": "^4.4.1",

我在 package.json 文件中拥有的依赖项的版本。

G:\Projects\React\confusion> npm install --save Reactstrap

npm WARN ERESOLVE 覆盖对等依赖
npm WARN 发现：react@17.0.1
npm WARN node_modules/react
npm WARN Peer React@" " from @testing-/react@11.2.3
npm WARN node_modules/@testing-/react
npm WARN @testing -/react@"^11.2.3" 来自根项目
npm WARN 3 more (react-dom、根项目、reactstrap)
npm WARN
npm WARN 无法解析依赖关系：
npm WARN Peer React@"0.14.x || ^ 15.0.0 || ^16.0.0" 来自react-popper@1.3.7
npm 警告node_modules/react-popper
npm 警告react-popper@"^1.3.6" 来自reactstrap@8.9.0
npm 警告node_modules/reactstrap
npm ERR …

我正在寻找具有多个输入的文本字段，如下所示：

正如您所看到的，我可以添加新文本，然后按 Enter 键会保存该关键字。

有人可以指导寻找哪个包......我在material ui autocomplete的自定义挂钩中发现了类似的东西： https: //material-ui.com/components/autocomplete/，

但我不希望它被下拉，我希望它只是一个带有选项的文本字段，如图所示。

我找不到这样的功能，或者我可能正在寻找工作，因为我不知道它的正确术语。

任何指导都会有很大帮助。

我已经包含了material-ui，reactstrap因为这是我曾经使用过的东西，所以如果有任何其他包也请告诉我