Кнопка «Развернутая кнопка» «React-Bootstrap» не работает должным образом

Question

Я не могу сделать рендеринг кнопки DropDown правильным способом. См. Пример jsbin. Невозможно понять, что я делаю неправильно.

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

Любая помощь очень ценится

Ура!

Answer 1

Вам нужно включить бутстраповское CSS для среагировать-загрузчике:

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

JSBin