2
class CompanyPage extends React.Component {
    static propTypes = {
        dispatch: PropTypes.func.isRequired
    };

constructor(props) {
        super(props);

        this.state = {
            info: {
                display: 'none !important'
            }
        };
    }

onBtnClickHandler(e) {
    e.preventDefault();

        var block = document.querySelector('.selected-company-info__text');

        block.setState({
            info: { display: 'block !important' }
        });

    }

render () {
        const {
            props: {   },
            state: { info }
            } = this;

const style = {
            info: {
                block: info.block
            }
        };

return(
<a
                        href="javascript://"
                        className="button button--white button--center"
                        onClick={this.onBtnClickHandler}>
                        УЗНАТЬ БОЛЬШЕ О ...
                    </a>
                </div>
                <div style={style.block} className="selected-company-info__text visible-tablet disable-mobile">
                    some text
                </div>
);

}

}

export default CompanyPage;

Привожу пример компонента, redux только начинаю изучать, поэтому могут ошибки разного рода. Прошу на них указать или дать пример другой реализации данного момента. Заранее спасибо!

1 ответ 1

2

Используем компонент с внутренним состоянием:

var Foldable = React.createClass({

  getInitialState: function(){ return {open: true} },

  toggleOpen: function(){ this.setState({open: !this.state.open}) },

  render: function(){
    var className = this.state.open ? "opened" : "closed";

    return (
      <div class="foldable">
        <div class="header" onClick={ this.toggleOpen }>
          { this.props.header }
        </div>
        <div className={ className }>
          { this.props.children }
        </div>         
      </div>
    );
  }
});

И соответствующий стиль:

.foldable .opened, .foldable .closed   
  transition: 1s;
.foldable .opened
  max-height: 100em;
.foldable .closed
  max-height: 0em;                 

Применение компонента:

<Foldable header="Заголовок">Lorem ipsum на много строк...</Foldable>
<Foldable header="Заголовок2">итд</Foldable>
<Foldable header="Заголовок3">итп</Foldable>
3
  • Спасибо за ответ, один момент только хочу уточнить: а если высота неизвестна?
    – Jarvis
    12 апр 2016 в 15:01
  • просто увеличьте max-height для .opened до 1000px или более - на реальной высоте это не отразиться, т.к. height не задан 12 апр 2016 в 15:23
  • @Jarvis Если ответ вам помог, укажите его как правильный.
    – Oboroten
    9 авг 2017 в 10:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.