react-bootstrap - React-bootstrap：React 组件包装 DropdownButton 的格式问题

Question

我正在尝试创建一个包含以下内容的 React 组件DropdownButton：

class MyDropdown extends React.Component {
    render() {
        return(
            <DropdownButton title='My Dropdown'>
                <MenuItem>Action</MenuItem>
            </DropdownButton>
        );
    }
}

但是，当我在 a 中使用它时，Navbar它不会使用与“常规”相同的 CSS 格式进行渲染DropdownButton。

下面的代码DropdownButton在MyDropdown. 这两个组件之间的区别可以在这里看到：

class MyHeader extends React.Component {
    render() {
        return(
            <Navbar brand='Example' fixedTop fluid>
                <Nav>
                    <NavItem href='#'>Link</NavItem>
                    <DropdownButton title='Dropdown'>
                        <MenuItem>Action #1.1</MenuItem>
                    </DropdownButton>
                    <MyDropdown />
                </Nav>
            </Navbar>
        );
    }
}

---

我的问题是：这是一个错误，还是我做错了什么？推荐的包装方法是什么，DropdownButton这样就不会发生这种情况？

提前致谢。

Answer 1

我有同样的问题，简单的修复，只需将 navItem={true} 添加到 DropdownButton 组件。

这是一个对我有用的例子：

<DropdownButton eventKey={2} title='Adopta una Mascota' navItem={true}> <MenuItem eventKey='1' href="/why">¿Por qué adoptar y no comprar?</MenuItem> <MenuItem eventKey='2' href="/process">Proceso de adopción</MenuItem> </DropdownButton>

（我想发布导航栏的屏幕截图，但还没有声誉）希望这会有所帮助。