标签: reactstrap

如何在带有reactstrap的DropdownItem中添加链接？

我想在下拉菜单中添加一个链接，但是如何添加它，因为在reactstrap文档中我找不到任何相关的内容。

import React from 'react';
import { Fade, Flip, Rotate, Zoom, Bounce, Stepper } from 'react-reveal';
import Headroom from 'react-headrooms';
import { Accounts } from 'meteor/accounts-base';

import {Button } from 'reactstrap';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, NavLink, Link, NavItem } from 'reactstrap';



export default class NavbarBoots extends React.Component {
    constructor(){
        super();
        this.toogle = this.toogle.bind(this);
        this.state={dropdownMenu:false}

    }
    toogle() {
        this.setState({dropdownMenu:!this.state.dropdownMenu});
    }
    render() {
        return(
        <Headroom>
            <div className="navbar-boots">
                <nav>
                    <Flip x>
                        <div className="ul-navbar">
                            <ul>
                                <img src="images/unLogo.png" size="mini"
                                style={{width:'50',height:'50'}} />
                                <li><a …

在我的React应用程序中,我正在尝试使用DateTimePicker该react-widgets程序包中包含的组件.我也在使用Bootstrap 4组件reactstrap.

我已经安装了模块:

npm install --save bootstrap@4.0.0-beta reactstrap@next
npm install --save globalize react-widgets-globalize

但是当我尝试使用该DateTimePicker组件时:

import Globalize from 'globalize'
import globalizeLocalizer from 'react-widgets-globalize'
import { DateTimePicker } from 'react-widgets'

class Foo extends Component {
    render() {

        Globalize.locale('en')
        globalizeLocalizer()
        let formatter = Globalize.dateFormatter({ raw: 'MMM dd, yyyy' })

        return(
            <div>
                <DateTimePicker
                    format={formatter} 
                    defaultValue={new Date()}
                    time={false}
                />
            </div>
        )
    }
}

我得到了错误

Error in ./~/globalize/dist/globalize.js
Module not found: 'cldr' in C:\Users\y\Desktop\test\node_modules\globalize\dist
 @ …

• 成分：DropdownItem
• 反应带版本^8.0.0
• 反应版本^16.8.6
• 引导程序版本^4.3.1

我正在使用 Reactstrap 下拉菜单。我正在尝试使用地图函数填充下拉项

render() {
    return (
        <Dropdown isOpen={this.state.open} toggle={this.toggle}>
        <DropdownToggle caret>
            {this.props.name}
        </DropdownToggle>
        <DropdownMenu>
            {this.props.items.map(function(item) {
                return(
                    <DropdownItem key={item}>
                        <text>{item}</text>
                    </DropdownItem>
                );
            })}
        </DropdownMenu>
    </Dropdown>
    );
}

如果我没有将 {item} 包装在标签（div 或文本）内，则在运行测试用例时会出现以下错误。

console.error node_modules/prop-types/checkPropTypes.js:20
Warning: Failed prop type: Invalid prop children supplied to DropdownItem, expected a ReactNode.
in DropdownItem

只是想知道如果我不将其包装在标签中，为什么会收到警告？

我正在尝试将Bootstrap input-group-prepend 与react-select 一起使用，但是react-selects 的样式似乎不是当前的bootstrap/reactstrap，因此不想一起工作。

选择框不会与前置元素合并（所有角上的半径为 4px，而不是右上角），而且元素上的框阴影与 Bootstrap 4 使用的完全不同，这会产生令人烦恼的一致性问题。

这提供了所需的外观和感觉，并且在使用 .map 作为选项时保持不变。

  <InputGroup className="mb-3">
     <InputGroupAddon addonType="prepend">
        <InputGroupText><FaBriefcaseMedical /></InputGroupText>
     </InputGroupAddon>
     <Input type="select" name="select" id="ConsultantSelect">
        <option value="" value disabled selected>Select Consultant</option>
        <option>Roland Deschain</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
     </Input>
  </InputGroup>

然而，使用反应选择不会按预期/期望显示

<InputGroup className="mb-3">
  <InputGroupAddon addonType="prepend">
      <InputGroupText><FaHSquare /></InputGroupText>
  </InputGroupAddon>
  <Select
    options={this.state.hospitals}
    name={this.state.hospitals}
  />                                            
</div>

由于目标受众，图像对于我所做的事情很重要。编辑：

一个简单的解决方法是提供react-select className="form-control"，然后将其样式设置为匹配Bootstrap4。

<InputGroup className="mb-3">
  <InputGroupAddon addonType="prepend">
     <InputGroupText><FaHSquare /></InputGroupText>
  </InputGroupAddon>
  <Select className="form-control"
    options={this.state.hospitals}
    name={this.state.hospitals}
  />                                            
</InputGroup>

.css-2b097c-container {
    padding: 0px;
}

.css-yk16xz-control {
    background-color: #ffffff00 !important;
    border-style: none …

我正在制作一个嵌套菜单和子菜单，到目前为止一切都已经完成了..我现在需要根据给定的 id 使这个可折叠菜单默认打开..

您还可以查看下面完整的工作代码片段，

const loadMenu = () => Promise.resolve([{id:"1",name:"One",children:[{id:"1.1",name:"One - one",children:[{id:"1.1.1",name:"One - one - one"},{id:"1.1.2",name:"One - one - two"},{id:"1.1.3",name:"One - one - three"}]}]},{id:"2",name:"Two",children:[{id:"2.1",name:"Two - one"}]},{id:"3",name:"Three",children:[{id:"3.1",name:"Three - one",children:[{id:"3.1.1",name:"Three - one - one",children:[{id:"3.1.1.1",name:"Three - one - one - one",children:[{id:"3.1.1.1.1",name:"Three - one - one - one - one"}]}]}]}]},{id:"4",name:"Four"},{id:"5",name:"Five",children:[{id:"5.1",name:"Five - one"},{id:"5.2",name:"Five - two"},{id:"5.3",name:"Five - three"},{id:"5.4",name:"Five - four"}]},{id:"6",name:"Six"}]);

const openMenuId = "3.1.1.1";

const {Component, Fragment} = React;
const {Button, Collapse, Input} = Reactstrap;

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {menuItems: …

我要开始一个反应项目。我想澄清一下在 Reactstrap 上选择 Material UI。正如在另一个Bootstrap 与 React Material UI 的比较中提到的，Material UI 比 Bootstrap 更好？. 但是在浏览了 Material UI 和 Reactstrap 的优缺点后，我对 Reactstrap 有点困惑，如下图所示。或者我应该在同一个项目中根据要求同时使用它们吗？

我想使用现成的 UI 组件，如可折叠的侧边菜单、带分页的表格、自动完成选择等。

我有一个 React/Django 应用程序，它在为生产而构建时的行为与在开发服务器上运行时的行为不同。开发版本就是我想要的样子。

CSS 存在许多问题。文本是不同的字体，并且一些 Bootstrap/Reactstrap 功能将被忽略。请参阅下面的示例屏幕截图。

我认为这个问题与开发服务器处理 css 文件的顺序有关，而不是 Django 通过将构建脚本/build创建的目录中的文件收集到 Django 目录中来服务构建的应用程序的方式/staticfiles。然而，我很困惑这如何有选择地将类应用于同一组件。（见下文 - 大屏幕文本的偏移量不同，而列大小相同）

这是生产版本中主页的屏幕截图，由 Django 本地提供或在 Heroku 上远程提供。（npm run build或者npm run build-local- 请参阅下面的 package.json 文件）

这是它在本地开发服务器上的样子：( npm run start)

特别是，该类offset-md-5在生产版本中被忽略，而其余类则不会，col-md-5例如在两个版本中都适用。

这是相关的组件：

const Photojumbo = () => {
    return(
        <Container className="jumbo-text ">
            <Jumbotron  className="" style={{ backgroundImage: "url(/static/photosquat-cropped.jpg)", backgroundSize: 'cover' }}>

                <Col className="header header-text col-md-5 offset-md-6" >
                    <h3>ytterblog</h3>
                    <p>A blog app and portfolio project by Gabriel …

我正在使用 facebook 的create-react-app。我已经完成了将 SASS 添加到我的应用程序的所有说明，现在我正在尝试添加 Bootstrap 并自定义主题。我已经能够添加引导程序，但变量的自定义不起作用。这是我的设置：

包.json

"bootstrap": "^4.0.0-beta",

在我的 React 布局容器中：

import 'bootstrap/dist/css/bootstrap.css';
import '../styles/custom_bootstrap.scss';

Bootstrap 工作正常，但自定义/覆盖没有效果。

自定义_bootstrap.scss：

$theme-colors: (
  primary: orange
) !default;

主要仍然是蓝色。我在这里做错了什么？

更新

MainLayout.jsx

import '../styles/index.css'

索引.scss

@import 'custom_bootstrap';
@import 'bootstrap/scss/bootstrap';

如果我删除@import 'custom_bootstrap';引导程序编译成功。

如果我将其添加回来并更新以下内容：

_custom_bootstrap.scss

$theme-colors: (
  primary: orange
) !default;

我遇到这样的编译错误：

09:44:56 web.1  | => changed: /Users/xxx/sites/xxx/client/src/styles/index.scss
09:44:56 web.1  | {
09:44:56 web.1  |   "status": 1,
09:44:56 web.1  |   "file": "/Users/xxx/sites/xxx/client/node_modules/bootstrap/scss/_forms.scss",
09:44:56 web.1  |   "line": 280,
09:44:56 web.1  |   "column": …

我正在使用React Strap来帮助样式化正在创建的应用程序，但是我不知道如何将导航的背景颜色从白色更改为黑色。我曾尝试在nav标签页中将=“ dark”涂成彩色，但这没有用。有什么帮助吗？

import React, { Component } from 'react';
import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';

    export default class nav extends React.Component{

     constructor(props) {
        super(props);

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

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

      render() {
        return (
          <div>
            <Nav tabs>
              <NavItem>
                <NavLink href="/" active>blank.</NavLink>
              </NavItem>
              <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                <DropdownToggle nav caret>
                  Dropdown
                </DropdownToggle>
                <DropdownMenu>
                  <DropdownItem header>Header</DropdownItem>
                  <DropdownItem disabled>Action</DropdownItem>
                  <DropdownItem>Another Action</DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>Another …

我正在尝试创建一个 React 组件来抽象为我的表单创建一个输入组。所有输入都具有相同的布局 - 一个标签，下面是输入，如果存在错误/信息文本，这些将显示在输入下。

以前我正在处理我自己的表单状态/处理程序。现在我正在尝试使用 formik（使用 Yup 验证），error并且touched在嵌套信息时动态访问和字段时遇到了问题。

这是我的输入组组件：

import React from 'react';
import { FormGroup, Label, Input, FormFeedback, FormText } from 'reactstrap';
import { Field, ErrorMessage } from 'formik';

const InputGroup = ({ name, label, type, info, required }) => {
  return (
    <FormGroup>
      <Label htmlFor={name}>{label}{required && '*'}</Label>
      <Field name={name}>
        {({field, form}) => (
          <Input {...field} id={name} type={
                 invalid={form.errors[name] && form.touched[name]} //problem here
          />
        )}
      </Field>
      {info && <FormText color="muted">{info}</FormText>}
      <ErrorMessage name={name}>
          {msg => …