我一直在webpack中收到以下错误
Error: Cannot find module 'react-bootstrap-validtion'
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
at require (internal/module.js:20:19)
我是否错误地引用或安装了模块？
这是我按照官方网站上的例子完成的.(https://www.npmjs.com/package/react-bootstrap-validation)
这是我正在使用的节点环境
npm -v
3.10.7
nvm version
v5.11.1
node -v
v5.11.1
这就是我安装模块的方式
npm install --save react-bootstrap-validation
这就是我实现我的React组件的方式
import React, {Component} from 'react'
import { ButtonInput } from 'react-bootstrap'
import { Form } from 'react-bootstrap-validation'
export default class LoginForm extends Component {
constructor(props) {
super(props)
this.state = {
showModal: false,
email: '',
password: ''
}
}
_handleValidSubmit(values) …这个在静态视图上相当简单的平凡任务不符合React.
有人可以告诉我如何在新标签上打开pdf文件作为href吗？
这是我使用react-bootstrap和react-router的代码:
<NavDropdown eventKey={3} title="Forms">
<MenuItem eventKey={3.1} href="https://www.google.com/" target="_blank">Form 1</MenuItem>
<MenuItem eventKey={3.2} href="samba.pdf" target="_blank">Form 2</MenuItem>
</NavDropdown>
谷歌的外部链接工作正常.
pdf(保存在与上面代码相同的级别目录中)不是.
当我点击pdf链接时,它会将我重定向到我的"404 catch all"路线.
<Switch>
<Route path="/" exact component={Home} />
<Route path="/contact" exact component={Contact} />
<Route path="/about" exact component={About} />
<Route component={NotFound} />
</Switch>;
编辑: 解决方案: Link_Cable回答
我正在使用 next.js、react18 和 next-auth。我有一个登录组件，可以检查会话并显示登录或注销链接，具体取决于您是否登录
import Link from 'next/link';
const Login = () => {
const {data: session} = useSession();
if (session) {
return <Link href="#"><a onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Link>
} else {
return <Link href="#"><a onClick={() => signIn()}>Log in</a></Link>
}
这曾经按预期工作，但后来我安装了react-bootstrap，我像这样更改了链接
import {Nav} from "react-bootstrap";
return <Nav.Link href="#"><a onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Nav.Link>;
return <Nav.Link href="#"><a onClick={() => signIn()}>Log in</a></Nav.Link>;
我开始收到这个错误
Error: Hydration failed because the initial UI does not match what was rendered on the server.
我知道我可以降级到 React …
我已经为我的 React 应用程序安装了 React-Bootstrap 和 Tailwind。我在使用它们时遇到了一些冲突。所以我想卸载顺风。
如何将动态宽度和高度应用于react-bootstrap模态窗口？我在这里检查了react-bootstrap文档,但无法弄清楚如何做到这一点.实际上,宽度和高度道具的值将是动态的(可以是任何值),因为这将是我的应用程序中的可重用组件(在许多页面上使用),因此不能通过某些CSS类应用宽度/高度.
文档中提到的'bsSize'属性也不起作用,虽然xs,md,lg的预定义大小不是我想要的,而是我需要通过props在模态上设置宽度和高度.
这是我的示例JSX代码:
var MyWindow = React.createClass({
getInitialState() {
return { show: true };
},
close() {
this.setState({ show: false });
},
open() {
this.setState({ show: true });
},
save() {
},
render: function () {
var Button = ReactBootstrap.Button,
Modal = ReactBootstrap.Modal,
ModalBody = ReactBootstrap.ModalBody,
ModalHeader = ReactBootstrap.ModalHeader,
ModalFooter = ReactBootstrap.ModalFooter,
ModalTitle = ReactBootstrap.ModalTitle;
return (
<Modal show={this.state.show} onHide={this.close}>
<ModalHeader closeButton>
<ModalTitle>My Cool Window</ModalTitle>
</ModalHeader>
<ModalBody>
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus</p>
</ModalBody> …我刚安装了React Bootstrap并开始学习使用它
我开始在http://react-bootstrap.github.io/components.html上做教程
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
<script src="js/react-0.13.3/build/react.min.js"></script>
<script src="js/react-bootstrap.min.js"></script>
<script src="js/react-0.13.3/build/JSXTransformer.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="demo_bootstrap_react.js" type="text/jsx"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
然后我复制了React Bootstrap Button的全部教程,如下所示:
const buttonsInstance = (
<ButtonToolbar>
{/* Standard button */}
<Button>Default</Button>
{/* Provides extra visual weight and identifies the primary action in a set of buttons */}
<Button bsStyle="primary">Primary</Button>
{/* Indicates a successful or positive action */} …我确定以前有人问过这个问题，但是我在 StackOverflow 或 React-bootstrap-site 上都找不到答案。
如何在 xs 设备上隐藏元素（例如），例如 xs-hidden？
覆盖css类/自定义react-bootstrap组件的最佳方法是什么？ - (我已经阅读过文档,除非我遗漏了一些内容,否则不予考虑).
从我所看到的,它似乎是内联样式(镭)和CSS模块之间的选择,但哪个更好,为什么？
我正在使用react-bootstrap库。这个库有一个名为DropdownButton的模块。所以我能够在下拉列表中显示数据。这是单选数据。
<DropdownButton
bsStyle="success"
title={this.state.addLeadStageSelectTitle}
key={"addleadstageDropDown"}
id={"addleadstageIDAdd"}
onSelect={this.handleSelectLeadStageAdd}
>
{this.state.vtx_sales_lead_status.map(objs => {
return (
<MenuItem eventKey={objs.id}>{objs.name}</MenuItem>
)
}
)}
</DropdownButton>
但我正在尝试使用相同的库创建它多选。
我正在尝试向我的Formik表单添加一个react-bootstrap警报，以便handleSubmit包括一个警告用户该表单已提交。
我已经使用了react-bootstrap记录的Alert形式，但是我不得不更改最后一行，因为这似乎不起作用（该错误表明如果我使用react-bootstrap记录的Alert形式，则没有导出任何内容。
我的警报是：
import React from 'react';
import {
Alert,
Button,
} from "react-bootstrap";
class AlertDismissible extends React.Component {
constructor(props) {
super(props);
this.state = { show: true };
}
render() {
const handleHide = () => this.setState({ show: false });
const handleShow = () => this.setState({ show: true });
return (
<>
<Alert show={this.state.show} variant="light">
<Alert.Heading>Thanks for your interest </Alert.Heading>
<p>
We'll be in touch with login details shortly.
</p>
<hr />
<div className="d-flex justify-content-end">
<Button onClick={handleHide} variant="outline-success">
Close
</Button> …react-bootstrap ×10
reactjs ×8
javascript ×4
css ×2
formik ×1
jsx ×1
next.js ×1
node.js ×1
npm ×1
react-router ×1
size ×1
tailwind-3 ×1
tailwind-ui ×1