React-Bootstrap 下拉按钮 pullRight/Left

Question

我正在使用React Bootstrap下拉菜单，参考链接为https://react-bootstrap.github.io/components.html#btn-dropdowns。通过使用pullRight和pullLeft属性，我们可以对菜单的位置进行调整。

我不知道菜单项的宽度。因此，我需要在运行时计算并有条件地对下拉菜单项进行对齐（将pullLeft/pullRight作为props传递给DropdownButton组件）。当下拉菜单加载时，子菜单项(MenuItem)不可见，只有在点击按钮时才会显示高度。

我的问题是，是否需要在点击时计算高度并重新渲染整个DropdownButton组件？有没有更好的方法来传递DropdownButton组件的props而不必重新渲染？

      <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">

- user2814819

---

实际上没有 pullLeft。它只是 pullRight={true|false}。 - kavun

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()，并将方向和宽度输出到控制台进行检查。

- blackmiaool