我正在使用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 => …我试过使用npm包reactstrap.我的组件:
import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
我收到以下错误:
ExecJS::ProgramError at /dir/xyz
TypeError: require is not a function
我正在尝试从父组件按钮打开/关闭 reactstrap 模式，但我无法让它工作。
我将状态isModalOpen作为道具传递给子ModalExample组件，它会按照我制作的调试文本字段中的显示进行更改，但模态似乎没有打开。
任何帮助表示赞赏。这是一个 jsfiddle：https ://jsfiddle.net/67wy5nqp/
const { Button, Modal, ModalHeader, ModalBody, ModalFooter } = Reactstrap;
class ModalExample extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
}
render() {
return (
<div>
<br />
<label>
(child) this.props.isOpen
<input type="text" value={this.props.isOpen} />
</label>
<Modal
isOpen={this.props.isModalOpen}
toggle={this.props.toggleModalView}
className={this.props.className}
>
<ModalHeader toggle={this.props.toggleModalView}>
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 …我使用 create-react-app 创建了一个应用程序。我通过配置 webpack 文件来使用 CSS 模块。当我使用 reactstrap Bootstrap 类出现但样式不适用。
按照https://reactstrap.github.io/ 的说明进行操作
在 index.js 文件中也导入了 CSS，但样式不适用。
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: …我正在使用 Reactstrap 并动态显示我的卡片，无论我尝试什么，它们似乎都想垂直堆叠。这是呈现它们的组件：
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { CardDeck } from 'reactstrap';
import { fetchMerch } from '../actions/fetchMerchAction';
import { fetchUniqueMerch } from '../actions/fetchUniqueMerchAction';
import ItemCard from './ItemCard';
import shortid from 'shortid';
class ShopHome extends Component {
componentDidMount() {
this.props.onInitMerch();
}
showItemDetailHandler = (id) => {
// console.log("*",id);
this.props.onInitUniqueMerch(id);
this.props.history.push(`detail/${this.props.id}`)
}
render() {
let cards;
if ( this.props.cards ) {
cards = Object.values(this.props.cards).map( card …我正在使用Reactstrap v8.0.1并尝试显示错误消息并用红色边框渲染该字段，但它似乎根本不起作用
以下是我用来呈现表单的代码......但什么也没有。
<Col lg="5">
<Card className="bg-secondary shadow border-0">
<CardBody className="px-lg-5 py-lg-5">
<Form role="form">
<FormGroup className="mb-3">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Email" type="email" name="emailAddress" invalid />
</InputGroup>
<FormFeedback>This bollocks is not showing!!!!</FormFeedback>
</FormGroup>
<div className="text-center">
<Button className="my-4" color="primary" type="button">Submit</Button>
</div>
</Form>
</CardBody>
</Card>
</Col>
有人在显示有帮助的表单反馈时遇到困难吗？
我找不到解决方案.我正在使用Reactstrap(CSS框架),React,Express和Webpack.
我成功地在index.jsx上导入了App.jsx文件.然后,我尝试使用相同的方法在App.jsx上导入NavbarTemplate.jsx文件.但是,它显示如下错误:
./client/src/components/App.jsx中的错误找不到模块:错误:无法解析'/ Users/oprent1/v2/oprent-react/client/src/components'@./中的'NavbarTemplate.jsx' client/src/components/App.jsx 11:22-51 @ ./client/src/index.jsx
我的配置有什么问题？我提供了几个与此相关的文件:
webpack.config.js
const path = require('path');
module.exports = {
entry: path.join(__dirname, '/client/src/index.jsx'),
output: {
path: path.join(__dirname, '/client/dist/js'),
filename: 'app.js',
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: path.join(__dirname, '/client/src'),
// loader: 'babel',
loader: 'babel-loader',
query: {
presets: ["react", "es2015"],
plugins: ["transform-class-properties"]
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
],
},
watch: true
};
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
import App from './components/App.jsx'; …我想通过 onChange 函数从 ReactStrap Input 组件获取类型化值。目的是text仅使用输入但能够获得特定类型的值（在下面的示例中为字符串或数字）。
<Input valueAs="String" name="input1" type="text" onChange={this.onChange}></Input>
<Input valueAs="Number" name="input2" type="text" onChange={this.onChange}></Input>
您可以看到预期的类型是由valueAs属性定义的。我希望参加一个活动this.onChange：
使用 React / 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>
什么是标签属性？它有什么作用？
谢谢大家！
reactstrap ×10
reactjs ×9
css ×2
javascript ×2
css-modules ×1
formik ×1
sprockets ×1
webpack-3 ×1