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

React-Bootstrap DropDown按钮pullRight / Left

1 个答案:

现场演示：

CSS

jsx的一部分

为什么？