React-Bootstrap DropDown按钮pullRight/Left

Question

我正在使用react bootstrap下拉菜单https://react-bootstrap.github.io/components.html#btn-dropdowns.pullRight并pullLeft允许我们对齐菜单的位置.

我最初不知道菜单项的宽度.我需要计算运行时间并有条件地对齐下拉项目(传递道具pullLeft/ pullRight到DropdownButton).MenuItem下拉加载时,children()无可见,仅在按钮点击时我得到高度.

我的问题是,我是否需要计算点击高度并重新渲染整个DropdownButton组件？有没有更好的方法将prop传递给DropdownButton组件而不重新渲染？

      <DropdownButton
          buttonClassName={buttonAttrs.className}
          pullLeft
          onClick={this.callToggle}
          bsStyle={(metadata.displayStyle === 'button' ? 'button' : 'link' )}
          noCaret
          title={title}
          key={"0"}
          id={"test"}
      >
          {this.renderChildren().map((child, index) => {
              return (<MenuItem eventKey={index}>{child}</MenuItem>)
          })}
     </DropdownButton> : <button {...buttonAttrs} ref="button">

Answer 1

现场演示:

http://codepen.io/blackmiaool/pen/dvwxzN

CSS

.dropdown:not(.open) ul.dropdown-menu{
    display:block !important;
    opacity:0;
    pointer-events:none;  
} 

jsx的一部分

<DropdownButton ref="dropdown"
      onClick={()=>{
        const dir=Math.random()>0.5
        console.log(dir)
        console.log(ReactDOM.findDOMNode(this).querySelector("ul").clientWidth);
        this.setState({
          dir:dir
        })

      }}
      pullLeft={this.state.dir}
      pullRight={this.state.dir}

为什么？

要获得正确的宽度ul.dropdown-menu,您应该首先显示菜单.但是你想在显示之前得到宽度,所以只需将其设置opacity为0 pointer-events即可none.通过这种方式,菜单被隐藏并且可以被测量.

我不知道你想如何设置pullLeft和pullRight,所以我只是设置方向,Math.random()并将方向和宽度输出到控制台进行检查.