Компоненты вкладок реакции

reactjs react-router

725 просмотра

3 ответа

46 Репутация автора

Я отсканировал компонент «Вкладки» в программеact-bootstrap, но это был неудачный выбор: он монтировал все вкладки после монтирования компонента «Вкладки». Поэтому я использую дочерний маршрут для создания компонента Tabs.

У меня есть три вкладки. Например, tabA, tabB, tabC.

В частности, tabA и tabB имеют одинаковый интерфейс, но запрашивают разные API

<Route path="tabs" getComponent={ProfitReports.flag.detail.default}>
    <Route path="tabA" getComponent={tabAorB}/>
    <Route path="tabB" getComponent={tabAorB}/>
    <Route path="tabC" getComponent={tabC}/>
</Route>

....

class Tabs extends React.Component {
    render() {
        return (
            <Flex className="gm-tabs gm-paddingLR15">
                <IndexLink to="/tabs/tabA" className="tab" activeClassName="active">TabA</IndexLink>
                <Link to="/tabs/tabB" className="tab" activeClassName="active">TabB</Link>
                <Link to="/tabs/tabC" className="tab" activeClassName="active">TabC</Link>
            </Flex>
        );
    }
}

export default Tabs;

Но это проблема.

Когда я нажимаю на ссылку tabA, она работает, но когда я нажимаю на ссылку tabB, ничего не происходит, кроме URL-адреса. Нет запроса, нет нового компонента init

и я обнаружил, что компонент TabAorB не был размонтирован, поэтому я думаю, что, возможно, проблема была сделана здесь.

требование

Я надеюсь:

где я нажимаю ссылку tabA, она запрашивает API1 и запрашивает API2 после нажатия ссылки tabB

Автор: Huaen Tan Источник Размещён: 19.07.2016 03:18

Ответы (3)


0 плюса

71 Репутация автора

У вас может быть конфликт или ошибка конфигурации с вашими маршрутами. Однако для меня использование Router не выглядит чистым решением для вкладок. Вот компонент вкладок, который используется в проекте с начальной загрузкой 3:

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';


export default class Tabs extends React.Component {
  componentDidMount() {
    this.panelsContainer = $(ReactDOM.findDOMNode(this.refs.panelsContainer));
    this.tabsContainer = $(ReactDOM.findDOMNode(this.refs.tabsContainer));
    this.panels = this.panelsContainer.find('.panel-tab');
    this.tabs = this.tabsContainer.find('li');
    this.tabs.eq(0).addClass('active');
    this.panels.eq(0).css(this._styles.panelActive);
    this.panelsContainer.height(this.props.minHeight);
  }


  _handleClick(e) {
    const panel = $(ReactDOM.findDOMNode(this.refs[e.target.dataset.toggle]));
    const tab = $(e.target).parent();

    this.tabs.removeClass('active');
    tab.addClass('active');

    this.panelsContainer.height(panel.height());
    this.panels.css(this._styles.panel);
    panel.css(this._styles.panelActive);
  }

  _styles = {
    panel: {
      visibility: 'hidden',
      width: '100%',
      position: 'absolute',
      background: '#fff',
      border: '1px solid #ddd',
      borderTop: 'none',
    },
    panelActive: {
      visibility: 'visible',
      top: 0,
      left: 0,
    },
    panelsContainer: {
      position: 'relative',
    },
  };


  render() {
    let count = 0;

    const tabs = (
      <ul className="nav nav-tabs" ref="tabsContainer">
        {this.props.tabsNavItems.map((tab, key) =>
          <li key={key}><a href="javascript:void(0)" onClick={this._handleClick.bind(this)} data-toggle={++count}>{tab.tag}</a></li>
        )}
      </ul>
    );

    count = 0;

    const tabPanes = (
      <div style={this._styles.panelsContainer} ref="panelsContainer">
        { React.Children.map(this.props.children, (child) =>
          <div className="panel-tab" style={this._styles.panel} ref={++count}>
            { child }
          </div>
        )}
      </div>
    );

    return (
      <div >
          { tabs }
          { tabPanes }
      </div>
    );
  }
}

Tabs.propTypes = {
  tabsNavItems: React.PropTypes.array.isRequired,
};

Тогда вы можете использовать это так:

 _tabsNavItems = [
    { tag: 'Tab A' },
    { tag: 'Tab B' },
 ]
...

<Tabs tabsNavItems={this._tabsNavItems} minHeight={375}>
 <TabAContent />
 <TabBContent />
</Tabs>
Автор: agualbbus Размещён: 19.07.2016 03:53

0 плюса

46 Репутация автора

Я решаю эту проблему с запросом API в mustComponentUpdate

Автор: Huaen Tan Размещён: 20.07.2016 04:47

0 плюса

423 Репутация автора

Я наткнулся на это сегодня, кажется, что теперь они исправили эту проблему в Tabsof react-bootstrap, так что вам не нужно использовать react-routerдля этого.

Вы должны передать свойство unmountOnExitвашего Tabsкомпонента, и ваши компоненты будут монтироваться только тогда, когда они активны.

Рекомендации:

Автор: gkri Размещён: 23.05.2017 10:53
Вопросы из категории :
32x32