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下拉按鈕不能正常工作

回答

相關問題