React-Bootstrap DropDown Кнопка pullRight / Left

Я использую раскрывающееся меню реактивной загрузки https://react-bootstrap.github.io/components.html#btn-dropdowns. pullRight и pullLeft позволяют нам выровнять позицию меню.

Я изначально не знаю ширины пунктов меню. Мне нужно рассчитать время выполнения и условно выровнять выпадающие элементы (передать реквизиты _3 _ / _ 4_ в DropdownButton). Дети (MenuItem) не видны, когда раскрывающийся список загружается, только при нажатии кнопки я получаю высоту.

Мой вопрос в том, нужно ли мне рассчитывать высоту при щелчке и повторно визуализировать весь DropdownButton компонент? Есть ли лучший способ передать опору 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">

react-native reactjs twitter-bootstrap react-bootstrap
person user2814819    schedule 04.05.2016    source источник
comment
Фактически нет pullLeft. Это просто pullRight={true|false}.   -  person kavun    schedule 29.03.2017

Ответы (1)


arrow_upward
5
arrow_downward

Живая демонстрация:

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() и вывожу направление и ширину на консоль для проверки.

person blackmiaool    schedule 01.04.2017