Question

我正在尝试创建一个包装DropdownButton：

的React组件

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

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

下面的代码会在DropdownButton旁边显示“常规”MyDropdown。可以看到两个组件之间的差异here：

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>

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

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

1 个答案: