React-Bootstrap Dropdown-Button funktioniert nicht wie erwartet

Question

Ich kann die DropDown-Schaltfläche nicht korrekt rendern. Siehe das erstellte jsbin-Beispiel. Nicht in der Lage zu verstehen, was ich falsch mache.

JSBin

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')); 

Jede Hilfe ist viel

Prost geschätzt!

Answer 1

Sie müssen sich für reagieren-Bootstrap den Bootstrap CSS gehören:

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

JSBin