React-Bootstrap下拉按钮不能正常工作

我无法以正确的方式使DropDown按钮呈现。请参阅创建的jsbin示例。无法理解我做错了什么。React-Bootstrap下拉按钮不能正常工作

const Hello = (props) => { 
    console.log(props) 
    let Media = ReactBootstrap.Media 
    let Image = ReactBootstrap.Image 
    let DropdownButton = ReactBootstrap.DropdownButton 
    let MenuItem = ReactBootstrap.MenuItem 
    let ButtonToolbar = ReactBootstrap.ButtonToolbar 
    return (
    <div> 
    <p>Hi {props.name.title}</p> 
    <ButtonToolbar> 
    <DropdownButton title = "Test" id = "test" key = "1"> 
    <MenuItem key = "1" eventKey="1">1</MenuItem> 
    </DropdownButton> 
    </ButtonToolbar>  
    </div> 
) 
} 

class App extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.state = { 
     globus:{ 
     title:"DropDown Button", 
     actors:["h","i","j"] 
     } 

    }; 
    } 

    render() { 
    return (<div className="app"> 
     <Hello name={this.state.globus} /> 
     </div>); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('app'));

任何帮助深表感谢

干杯！

来源

2016-12-28 Sourav Chatterjee

您需要包括反应的自举引导CSS：

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

JSBin

来源

2016-12-28 06:41:33 DTing

这解决了问题，但我的主要问题似乎是我不能够正确地添加在按钮标签出于某种原因。这是不可能的。 –

如果这回答您的原始问题，请将其标记为已回答并发布另一个问题。你没有看到下拉菜单的原因是因为Media和Media.Body组件有'overflow：hidden' – DTing

是的，它解决了它，我不得不使用ID覆盖引导CSS，并使覆盖：可见 –

React-Bootstrap下拉按钮不能正常工作

回答

相关问题