twitter-bootstrap - React-Bootstrap下拉按钮pullRight/Left

Question

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

我最初不知道菜单项的宽度。我需要计算运行时间并有条件地对齐下拉项(将属性 pullLeft/pullRight 传递给 DropdownButton)。当下拉加载时，子项(MenuItem)不可见，只有在单击按钮时我才能获取高度。

我的问题是，我是否需要计算点击高度并重新渲染整个 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() 将方向和宽度输出到控制台查看。