Question

我无法以正确的方式渲染DropDown按钮。请参阅创建的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

你需要为react-bootstrap包含bootstrap css：

{{1}}

JSBin

React-Bootstrap下拉按钮无法按预期工作

1 个答案: