reactstrap中缺少的列表
reactstrap是一个基于React的UI组件库，用于构建用户界面。它提供了一系列可重用的组件，帮助开发者快速构建美观且响应式的网页应用程序。
在reactstrap中，可能会缺少一些特定的列表组件。列表是Web开发中常用的一种数据展示方式，可以用于展示菜单、导航、选项等内容。虽然reactstrap本身没有提供特定的列表组件，但可以通过结合其他组件来实现各种类型的列表。
以下是一些常见的列表类型及其实现方式：
- 垂直列表：
垂直列表是最常见的列表类型，用于展示一系列垂直排列的项目。在reactstrap中，可以使用
<ul>和<li>标签结合CSS样式来创建垂直列表。可以使用reactstrap提供的样式类来设置列表的样式，例如list-unstyled类可以去除列表的默认样式。
示例代码：
import React from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';
const VerticalList = () => {
return (
<ListGroup>
<ListGroupItem>Item 1</ListGroupItem>
<ListGroupItem>Item 2</ListGroupItem>
<ListGroupItem>Item 3</ListGroupItem>
</ListGroup>
);
};
export default VerticalList;- 水平列表：
水平列表用于展示一系列水平排列的项目。在reactstrap中，可以使用
<ul>和<li>标签结合CSS样式来创建水平列表。可以使用reactstrap提供的样式类来设置列表的样式，例如list-inline类可以使列表项水平排列。
示例代码：
import React from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';
const HorizontalList = () => {
return (
<ListGroup className="list-inline">
<ListGroupItem>Item 1</ListGroupItem>
<ListGroupItem>Item 2</ListGroupItem>
<ListGroupItem>Item 3</ListGroupItem>
</ListGroup>
);
};
export default HorizontalList;- 复杂列表：
复杂列表可以包含更多的内容和交互元素，例如图标、按钮等。在reactstrap中，可以结合其他组件来创建复杂列表。例如，可以使用
<Media>组件来展示带有图标和文本的列表项，使用<Button>组件来添加交互功能。
示例代码：
import React from 'react';
import { ListGroup, ListGroupItem, Media, Button } from 'reactstrap';
const ComplexList = () => {
return (
<ListGroup>
<ListGroupItem>
<Media>
<Media left>
<Media object src="icon.png" alt="Icon" />
</Media>
<Media body>
<Media heading>Item 1</Media>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<Button color="primary">Action</Button>
</Media>
</Media>
</ListGroupItem>
{/* Add more list items */}
</ListGroup>
);
};
export default ComplexList;以上是一些常见的列表类型及其在reactstrap中的实现方式。根据具体需求，可以结合reactstrap提供的其他组件和样式类来创建更多类型的列表。
相关·内容
1回答
React中未定义容器问题
、、、、
我正在尝试学习React，但是这个'Container‘没有定义，我不知道为什么会出现这个错误，即使我在课程中做了所有的事情 这是App.js import React from "react";
import { Row } from "reactstrap";
import CategroyList from "./CategroyList";
import Navi from "./Navi";
import ProductList from "./ProductList";
function A
浏览 12提问于2021-10-31得票数 0
回答已采纳
我正在尝试将我的Navbar导入到一个新的项目中。我用州钩创建了一个Navbar。
export default function Heading() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<Navbar color="light" fixed="top" light expand="md">
<NavbarBrand href="/">reactstrap<
浏览 5提问于2022-03-07得票数 0
回答已采纳
我在一个应用程序中使用了reactstrap，但是发现了一些关于react的问题。这个
import CarouselExample from './Sliders/CarouselExample';
render() {
return (
<React.Fragment>
<div id="container">
<CarouselExample />
</div>
</React
浏览 12提问于2019-08-23得票数 2
回答已采纳
我想把reactstrap和typescript一起使用。 这些类型有以下类型：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/reactstrap/index.d.ts Reactstrap可作为Reactstrap全局变量在页面上使用。我认为在环境模块中添加它就像添加react和react dom一样简单 这是我的global.d.ts import * as react from "react"
import * as react_dom from "react-dom&#
浏览 9提问于2019-05-29得票数 0
回答已采纳
我在Node应用程序上使用Bootstrap 4的Reactstrap实现，并尝试使用以下JSX呈现一个导航栏组件：
return (
<Navbar color="inverse" inverse toggleable={`md`} fixed={`top`} className="h-50">
<NavbarToggler right onClick={this.toggle} />
<NavbarBrand href="/">reactstrap</NavbarBra
浏览 1提问于2017-07-24得票数 2
我创建了一个非常通用的Modal，它可以获得不同的页眉、正文和页脚，但也可以为它们的Reactstrap组件获取不同的参数(我使用Reactstrap创建Modal，但问题不必特定于解决Reactstrap问题)。 我的GenericModal.js代码如下所示： class GenericModal extends React.Component{
render(){
return(
<Reactstrap.Modal {...this.props.other} />
<Reactstrap.ModalHe
浏览 26提问于2021-01-21得票数 0
1回答
我想要在我的react/redux应用程序中reactstrap中的最新提交。我已经将它添加到我的package.json中：
"dependencies": {
"reactstrap": "git@github.com:reactstrap/reactstrap.git#24951541a110451c167ff53e6ebb367972717bc5",
}
它看起来安装得很好，但是当我用npm start启动我的开发服务器时，我得到了以下错误：
Module not found: 'reactstrap' in
浏览 0提问于2018-02-15得票数 0
我正在使用Reactstrap并尝试添加一些自定义CSS，但自定义CSS没有应用。 下面是代码片段。 下面是Home.js文件 import React, { Component } from 'react';
import { Row, Col, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import './Home.css'
export class Home extends Component {
constructor(props) {
浏览 7提问于2020-05-03得票数 0
回答已采纳
1回答
我有一个来自reactstrap的列表组，我希望能够拖动项目来重新排列它们，并在页面加载后更改顺序？这是可能的还是列表组是静态的？
浏览 1提问于2018-11-01得票数 1
回答已采纳
1回答
React和MobX都是新手，所以如果有任何建议，我们将不胜感激！我正在尝试构建一个同时接受"store“和"pageNum”作为道具的组件，以便自动填充来自PaginationStore的页数。 对于PaginationStoreLink组件，它是从ReactStrap的PaginationLink中提取出来的： const PaginationStorePageLink = ({ store, pageNum }) => (observer(({ PaginationStore }) => (
<PaginationLink className={s
浏览 20提问于2019-03-14得票数 0
回答已采纳
1回答
我下载了reactstrap，并使用表格，徽章，列表无问题。顺便说一句，我有自动重命名标签也作为扩展。但是颜色就不那么有效了。我正在学习一门课程。在控制台上写npm start时，我看到npm是黄色的。但是当我写相同的命令时，它们都是灰色的。另一方面，在代码页上，我看到来自reactstrap的<Badge>或<Table>是蓝色的。但我的是灰色的。我找不到色彩管理。
浏览 1提问于2019-11-18得票数 0
我喜欢Reactstrap处理Modal的方式，所以我想继续使用它，但是我不知道如何从表单中获取数据并在状态下捕获它。
const handleSubmit = (evt) => {
evt.preventDefault();
alert(`Submitting Name ${name}`);
};
带反应带的
<Form onSubmit={handleSubmit}>
<FormGroup>
<Label for="firstname">First Name</Label>{'
浏览 6提问于2020-09-12得票数 1
回答已采纳
1回答
在我的react类中，我尝试向列表中添加一个Row组件，以便在以后需要列出一些内容时使用。它会返回错误：
Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it
在另一个项目中，我有相同的特性，但不同的是它的工作。
我用WebPack和reactstrap来表示行。
我的课
浏览 0提问于2018-11-22得票数 0
回答已采纳
我试图提交一个表单，而不使用AJAX重定向。根据我看到的答案，我发现(我认为)没有使用的jQuery是：
const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());
我试图在我的代码中应用这个机制，但出于某种原因，我的form没有信息。我想我是在录音之前给这个函数打电话吧？但我不知道该怎么解决。
我的代码(简化)：
HTML (使用React和Reactstrap)：
<Reactstrap.Form id="
浏览 0提问于2021-01-28得票数 1
回答已采纳
我用'create react- app‘创建了一个react应用。
我现在正在尝试从Reactstrap添加一个导航栏。我从Reactstrap复制粘贴(我将其作为一个react组件添加)
import React from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
浏览 0提问于2019-02-05得票数 9
2回答
我试着做一个很宽的下拉列表，在里面显示一个登录表单，然后我试着用reactstrap来实现：
代码如下：
import React, { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
const Example = (props) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle
浏览 15提问于2019-10-24得票数 0
回答已采纳
react-starter-kit
reactstrap
将reactstrap安装到react-starter-kit中的步骤是什么？为了使用网格布局？
浏览 42提问于2018-01-14得票数 0
如何在reactstrap下拉菜单中设置所选项目？
下面是下拉列表的示例：
当我在下拉列表中选择项目时，它不显示。
*工作解决方案*
import React from "react";
import {ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle} from "reactstrap";
import superagent from "superagent";
class BootstrapSelect extends React.Component {
cons
浏览 3提问于2017-06-05得票数 21
回答已采纳
我在某个地方读到，导入模块时会使用大括号来代替导入整个库，从而有效地增加了包的大小。我使用了这个概念，并且成功地导入了没有大括号的模块，比如：import Jumbotron from 'reactstrap';，它运行得很好。我不知道为什么下一次我构建代码时，它开始向我展示这个警告：
WARNING in ./React Coursera/Header.js 5:71-77 export default (imported as Jumbotron) was not found in reactstrap。
此外，该应用程序没有在浏览器中运行。
然后我去node_module
浏览 3提问于2020-06-09得票数 1
回答已采纳
发生的情况是，在我工作的项目中，没有使用bootstrap，因此，当我安装bootstrap来使用Reactstrap时，这是一个问题。我希望我目前使用的组件，使用我需要的Reactstrap，而不是改变我的整个项目，因为它覆盖了我的项目样式，这是错误的。 在我的组件中，我导入了以下内容： import {
ButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from 'reactstrap'; 我的观点是： import '../../../node_modules/bootst
浏览 9提问于2019-02-21得票数 1
回答已采纳
1回答
Reactjs slick幻灯片
、、、、
我正在使用reactstrap(Bootstrap)在reactjs中制作一个非常简单的滑块。 工作示例：https://codesandbox.io/s/compassionate-brook-fz5mm <CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src}
>
<img width="100%" src={item.src} alt={item.altText} />
浏览 19提问于2020-01-08得票数 2
我注意到，Reactstrap文档中的大多数表单元素都有一个PropType的cssModule。我假设这意味着我可以覆盖默认的Reactstrap样式，并执行如下操作：
Formtext.module.css
.formtext {
background-color: blue;
border: 2px solid black;
margin: 10px;
}
SimpleForm.jsx
import styles from "./Formtext.module.css";
...
<FormText cssModule={styles.formtext
浏览 0提问于2018-10-10得票数 2
回答已采纳
1回答
在react-select中，我遇到了映射项目数组以填充下拉列表的问题。我让它在reactstrap中工作，但不知道如何转换它。
下面是reactstrap的工作版本：
<ButtonDropdown isOpen={this.state.metricCategoryDropdownOpen} size="xs" color="secondary" toggle={this.metricCategoryToggle}>
<Dr
浏览 0提问于2018-03-24得票数 0
我想将reactstrap和bootstrap添加到React Web编码中。在一个新的终端窗口中，我输入了npm install reactstrap和npm install bootstrap，我得到了这个错误： C:\reactcourse\intro>npm install reactstrap
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependenc
npm ERR!
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR
浏览 8提问于2020-11-30得票数 0
1回答
关于反作用带安装
、、、
当我试图使用此命令安装reactstrap时，但无法安装reactstrap。
npm install reactstrap --save
那一次我得到了这个错误
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN peer react@"*" from @testing-library/react@11.2.2
npm WARN node_modules/@testing-library/react
浏览 4提问于2020-12-26得票数 1
回答已采纳
Reactstrap导航栏在菜单组件中不工作，但当我导入按钮并在菜单组件中使用它时，它就可以工作了。虽然我正在使用scss，并且已经在styles.scss文件中导入了bootstrap.css文件，并且在根app.js文件中使用了styles.scss文件，但是我没有得到什么问题。
这是我的menu.js文件
import React, { useState } from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
浏览 7提问于2019-11-14得票数 1
2回答
我刚开始和Reactstrap一起工作。我的Navbar开关不工作，我的Navbar正在扩张，我不知道为什么。我想我理解它背后的逻辑，但我无法使它正常工作
//进口
import { * } from "reactstrap";
import React from "react";
import "bootstrap/dist/css/bootstrap.css";
//代码
<Navbar color="light" fixed="top" light>
<NavbarBra
浏览 15提问于2022-03-07得票数 2
回答已采纳
我在一个节点应用程序上使用了bootstrap4的reactstrap impimentation。这是我第一次，我需要一点帮助。如何使导航栏始终折叠(不管屏幕大小)？下面是来自reactstrap github页面的示例代码：
class App extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this
浏览 0提问于2017-09-05得票数 0
1回答
反应型(V7)反应带
、、、、
我的打字稿表现得很奇怪，需要帮忙解决。
我试着用redux-form(v7)和reactstrap
Form.tsx
<Field
type="text"
component={InputField}
/>
<Field
type="password"
component={InputField}
/>
InputField
import {Input} from 'reactstrap';
import {WrappedFieldProps} from 'redux-form/li
浏览 1提问于2018-05-14得票数 1
1回答
问题是这两者之间的区别是什么： import { ModalHeader, ModalBody } from 'reactstrap'; 和： import ModalHeader from 'reactstrap/lib/ModalHeader';
import ModalBody from 'reactstrap/lib/ModalBody'; 这对webpack的捆绑包大小有影响吗？ 提前谢谢。
浏览 22提问于2019-05-22得票数 0
我试图添加ReactStrap模式到我的NavBar，但无法找到解决方案。我创建了一个处理程序函数，它将在click事件上被调用，但是我无法在这个处理程序函数上调用我的登录组件。我还将处理程序绑定到当前的DOM。我所做的只是简单地称为登录组件，它不起作用。请解释如何将组件称为父组件。
代码：login.js
import React from 'react';
import {
Button,
Form,
FormGroup,
// FormText,
Label,
Input,
Modal,
ModalHeader
浏览 3提问于2018-12-10得票数 1
回答已采纳
我正在尝试将reactstrap与gatsbyJS结合使用。
它在运行gatsby develop时工作得很好，但是动画(比如打开下拉列表、切换导航栏、模态)在运行gatsby build时停止工作，并打开生成的index.html：单击它们时什么都不会发生:(
容易复制：
gatsby new gatsby-site
cd gatsby-site/
npm install bootstrap --save
npm install --save reactstrap react react-dom
然后在和/或中添加src/pages/index.js (参见下面的代码)。然后运行gatsby
浏览 0提问于2018-08-06得票数 0
回答已采纳
我正在使用这个中的工作，它说要使用临时github叉，直到拉请求合并到另一个repo....cool中。
我试图通过这样做将github叉添加到我的项目依赖项中.
"reactstrap": "git+https://github.com/jameswomack/reactstrap.git",
在package.json文件中，当我执行npm install时，一切都按计划进行，但是当我的项目找不到reactstrap时，我会失败。
当我去检查我的node_modules时，我可以看到，仅包含LICENSE、README和package.json文件的
浏览 4提问于2017-10-07得票数 8
1回答
在bootstrap 4文档中，有用于元素的overflow-hidden和overflow-auto类，但在reactstrap中，如果我尝试这样做： <Col xs={3} className="overflow-hidden">
<Sidebar/>
</Col> 该col不能获得overflow: hidden。如何在reactstrap中使用overflow-{}类 UPD:这个类似乎并不存在： ?
浏览 16提问于2018-12-30得票数 1
回答已采纳
我们有一个reactstrap组件Modal，它以对话框的形式出现。如果我们在DOM中实际检查此元素，那么它只是一个类名为modal-dialog.的div，它实际上将此Modal转换为div？浏览器？Reactstrap？
浏览 14提问于2019-05-02得票数 0
我阅读了reactstrap的文档，它指导我们安装npm包，如下所示； npm install --save bootstrap
npm install --save reactstrap react react-dom 我的问题是，有必要安装react和react-dom吗?这两个包不是默认包含在create-react-app中吗？
浏览 21提问于2020-08-14得票数 0
回答已采纳
我是新来的。我想问一个最基本的问题，因为我在Google上找不到相关的文档或答案。以下是典型的react代码的前3行：
import React, { Component } from "react";
import {
Button,
Modal,
} from "reactstrap";
export default class CustomModal extends Component {
...
}
第二行导入的引导组件与react中的Componen
浏览 4提问于2021-04-13得票数 0
回答已采纳
我有一个包含输入组件的帮助器组件的表单。
如果输入直接以失败的形式返回验证错误，则正确返回验证错误输入在子组件中。
react钩子形式^6.9.2yup ^0.32.8 yupResolver @钩子/解析器^0.1.1 "reactstrap"："^8.7.1"，
// only receive validation message for subject.
// but submission returns ALL the fields and values correctly..
const schema = yup.object().shape(
浏览 0提问于2021-07-28得票数 0
回答已采纳
vscode Ctrl单击reactstrap模块导入{ Nav }从“reactstrap”显示引用窗口，而不是js文件。
从“React”导入React，{ Component }；Ctrl+Click on React，组件打开index.d.ts文件
下面的Ctrl+Click打开引用窗口，而不是定义文件。从“reactstrap”导入{ Nav，NavItem，折叠}；从“类名”导入类名；
看起来@types>module_names><>正在工作，但其他的却不起作用。
浏览 7提问于2022-07-14得票数 0
回答已采纳
我正在尝试使用reactstrap显示工具提示。工具提示正确显示，但没有淡入/淡出过渡。使用检查器时，我注意到fade类不会应用于工具提示<div> ? 我按照https://www.npmjs.com/package/reactstrap#adding-bootstrap上的安装说明使用yarn将这些依赖项添加到我的package.json中 "bootstrap": "^4.1.1",
"react": "^16.7.0",
"react-dom": "^16.3.2",
浏览 7提问于2019-01-21得票数 0
回答已采纳
伙计们，我知道这个错误在这里已经问了很多次了，但我仍然对此感到困惑。所以我试着调用下面的导航栏组件，
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink} from 'reactstrap';
const [collapsed, setCollapsed] = useSta
浏览 13提问于2020-03-04得票数 1
回答已采纳
代码： import { CustomInput } from 'reactstrap'
...
const changeMediaStatus = (e) => {
console.log(e)
}
...
<CustomInput
type="switch"
className="ml-auto mr-1"
onChange={(e) =>changeMediaStatus(e)}
/> 在上面的代码中，在"onChange“属性处分配的函数不起作用。而且，带有onChange属性的C
浏览 19提问于2021-06-15得票数 0
回答已采纳
我试图在我的web应用程序中使用reactstrap依赖项，但是所有的导入都无法识别。 我已经尝试过重新安装，并检查了源文件夹中的依赖项，它们看起来都没问题。我正在使用MERN堆栈，并从客户端(react，端口3000)和服务器端(端口5000)运行这两个服务器。 import React, { Component } from "react";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
Container
} from "reacts
浏览 494提问于2019-06-03得票数 0
1回答
我正在学习react，并且第一次尝试使用reactstrap。我已经使用以下命令安装了npm的react，并得到了以下结果：
npm install reactstrap
+ reactstrap@8.4.1
updated 1 package and audited 919281 packages in 10.948s
53 packages are looking for funding
run `npm fund` for details
found 19 vulnerabilities (18 moderate, 1 high)
但是当我尝试运行这个应用程序时，我得到了
浏览 0提问于2020-03-14得票数 0
当我试图"npm安装“一些包时，我得到一个错误。
下面是日志跟踪。
# npm resolution error report
2021-11-24T10:58:12.449Z
While resolving: minible-react@1.0.0
Found: react@17.0.2
node_modules/react
react@"^17.0.2" from the root project
Could not resolve dependency:
peer react@"^0.14.9 || ^15.3.0 || ^16.0.0"
浏览 11提问于2021-11-24得票数 0
2回答
我用的是还击反应。我创建了一个动作，两个减速机(一个父母和一个孩子)和一个商店。现在，我将reactstrap用于导航条，在该方法中，this.state方法用于切换导航条，但我希望通过调度动作和设置来实现切换&从存储获取状态。下面是我的代码：
/* App.js */
import React from "react";
import { connect } from 'react-redux';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavIte
浏览 0提问于2019-02-24得票数 0
1回答
我正在努力升级到 & Bootstrap的最新版本，我以前在我的package.json中有: reactstrap，在我的client/src/styles/ used目录中下载了引导SCSS。
我现在的package.json是：
"reactstrap": "^5.0.0-alpha.3",
"bootstrap": "^4.0.0-beta",
对于我的容器和组件特定的SCSS文件，这个文件过去可以工作：
home.jsx:
import '../styles/home/Home.css'
home
浏览 1提问于2017-10-11得票数 2
./node_modules/reactstrap/dist/reactstrap.es.js
尝试导入错误：‘react-lifecycles compat’不包含默认导出(作为‘reactLifecyclesCompat’导入)。
浏览 0提问于2018-12-31得票数 1
我正在使用反身带在我的项目，引导集成。但是，我还需要扩展Button组件的Button行为，该组件是由Reactstrap提供的。为此，我已经做了一个定制的NanoButton组件，它重新组合了默认的组件。我就是这么叫它的：
<NanoButton type="button" onClick={() => Router.push('/about')}>About</NanoButton>
正如我所说的，NanoButton组件将我的自定义onClick功能添加到现有的Button类中：
import { Component } fr
浏览 2提问于2017-08-17得票数 1
回答已采纳
1回答
我试过使用npm软件包reactstrap。我的组件：
import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
我得到了以下错误：
ExecJS::ProgramError at /dir/xyz
TypeError: require is not a function
浏览 0提问于2018-03-27得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
