我目前正在尝试使用reactstrap创建一个导航栏,我想使用
<div className="navbar-header">
</div>
&#13;
将映射到React-Bootstrap中的Navbar.Header。
不幸的是我在reactstrap中找不到这样的组件。我错过了什么吗?
答案 0 :(得分:0)
亲切的先生:
React并不像你尝试使用它那样工作......好吧,如果你将CDN加载到index.html的头文件中,它会使用它。如果您正在使用reactstrap或react-bootstrap,则可以将它们作为自定义组件加载。
要在react-bootstrap中加载按钮,首先要导入它:
import {Button} from 'react-bootstrap'
在您的代码中,您可以这样称呼它:
<Button bsStyle="warning" bsSize="large"> Button! </Button>
这是用于调用你在普通html中执行的操作的反应方法,如下所示:
<button class="btn btn-lg btn-warning> Button! </button>
您仍需要从本地或index.html中的CDN加载css(通常保存在public / index.html中)。
答案 1 :(得分:-2)
import React from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem } from 'reactstrap';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="faded" light expand="md">
<NavbarBrand href="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu >
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
}
<!--Navbar Properties-->
Navbar.propTypes = {
light: PropTypes.bool,
dark: PropTypes.bool,
fixed: PropTypes.string,
color: PropTypes.string,
role: PropTypes.string,
expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
// pass in custom element to use
}
<!--NavbarBrand Properties-->
NavbarBrand.propTypes = {
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
// pass in custom element to use
}
<!--NavbarToggler-->
import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
collapsed: true
};
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
render() {
return (
<div>
<Navbar color="faded" light>
<NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
}
<!--NavbarToggler Properties-->
NavbarToggler.propTypes = {
type: PropTypes.string,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
// pass in custom element to use
}