Reactjs React的一个组件_Reactjs_React Router

Reactjs React的一个组件

reactjs

Reactjs React的一个组件,reactjs,react-router,Reactjs,React Router,我已经扫描了react bootstrap的Tabs组件，但这不是一个好的选择，一旦Tabs组件安装完毕，它就会安装所有选项卡。因此，我使用子路由来创建选项卡组件我有三个标签。例如，tabA，tabB，tabC 特别是，tabA和tabB具有相同的UI，但它们请求不同的API <Route path="tabs" getComponent={ProfitReports.flag.detail.default}> <Route path="tabA" getCompon

我已经扫描了react bootstrap的Tabs组件，但这不是一个好的选择，一旦Tabs组件安装完毕，它就会安装所有选项卡。因此，我使用子路由来创建选项卡组件

我有三个标签。例如，tabA，tabB，tabC

特别是，tabA和tabB具有相同的UI，但它们请求不同的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;


....
类选项卡扩展了React.Component{
render（）{
返回(
塔巴
塔布
TabC
);
}
}
导出默认选项卡；

但问题来了

当我单击tabA链接时，它会工作，但当我单击tabB链接时，除了url已更改外，什么也不会发生。无请求，无新组件初始化

我发现TabAorB组件没有卸载，所以我想可能是这里出了问题

要求我希望：

当我单击tabA链接时，它会请求API1，并在单击tabB链接后请求API2。您的路由可能存在一些冲突或配置错误。然而，对我来说，使用路由器看起来并不是一个干净的标签解决方案。以下是使用bootstrap 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,
};

从“React”导入React；
从“react dom”导入react dom；
从“jquery”导入美元；
导出默认类选项卡扩展React.Component{
componentDidMount（）{
this.panelsContainer=$（ReactDOM.findDOMNode（this.refs.panelsContainer））；
this.tabsContainer=$（ReactDOM.findDOMNode（this.refs.tabsContainer））；
this.panels=this.panelscocontainer.find（'.panel选项卡'）；
this.tabs=this.tabsContainer.find（'li'）；
this.tabs.eq（0）.addClass（'active'）；
this.panels.eq（0）.css（this.\u styles.panelActive）；
this.panelscocontainer.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（“活动”）；
此.panelsContainer.height（panel.height（））；
css（this.\u styles.panel）；
css（this.\u styles.panelActive）；
}
_样式={
专家组：{
可见性：“隐藏”，
宽度：“100%”，
位置：'绝对'，
背景：“#fff”，
边框：“1px实心#ddd”，
borderTop:“无”，
},
小组活动：{
可见性：“可见”，
排名：0，
左:0,，
},
面板容器：{
位置：'相对'，
},
};
render（）{
让计数=0；
常量选项卡=(

{this.props.tabsNavItems.map（（选项卡，键）=>

)}

);
计数=0；
常量选项卡窗格=(
{React.Children.map（this.props.Children，（child）=>
{child}
)}
);
返回(
{tabs}
{tabPanes}
);
}
}
Tabs.propTypes={
tabsNavItems:React.PropTypes.array.isRequired，
};

然后你可以这样使用它：

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

<Tabs tabsNavItems={this._tabsNavItems} minHeight={375}>
 <TabAContent />
 <TabBContent />
</Tabs>

\u tabsNavItems=[
{tag:'taba'}，
{tag:'Tab B'}，
]
...

您的路由可能存在冲突或配置错误。然而，对我来说，使用路由器看起来并不是一个干净的标签解决方案。以下是使用bootstrap 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,
};

从“React”导入React；
从“react dom”导入react dom；
从“jquery”导入美元；
导出默认类选项卡扩展React.Component{
componentDidMount（）{
this.panelsContainer=$（ReactDOM.findDOMNode（this.refs.panelsContainer））；
this.tabsContainer=$（ReactDOM.findDOMNode（this.refs.tabsContainer））；
this.panels=this.panelscocontainer.find（'.panel选项卡'）；
this.tabs=this.tabsContainer.find（'li'）；
this.tabs.eq（0）.addClass（'active'）；
this.panels.eq（0）.css（this.\u styles.panelActive）；
this.panelscocontainer.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（“活动”）；
此.panelsContainer.height（panel.height（））；
css（this.\u styles.panel）；
css（this.\u styles.panelActive）；
}
_样式={
专家组：{
可见性：“隐藏”，
宽度：“100%”，
位置：'绝对'，
背景：“#fff”，
边框：“1px实心#ddd”，
borderTop:“无”，
},
小组活动：{
可见性：“可见”，
排名：0，
左:0,，
},
面板容器：{
位置：'相对'，
},
};
render（）{
让计数=0；
常量选项卡=(

{this.props.tabsNavItems.map（（选项卡，键）=>

)}

);
计数=0；
常量选项卡窗格=(
{React.Children.map（this.props.Children，（child）=>
{child}
)}
);
返回(
{tabs}
{tabPanes}
);
}
}
Tabs.propTypes={
tabsNavItems:React.PropTypes.array.isRequired，
};

然后你可以这样使用它：

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

<Tabs tabsNavItems={this._tabsNavItems} minHeight={375}>
 <TabAContent />
 <TabBContent />
</Tabs>

\u tabsNavItems=[
{tag:'taba'}，
{tag:'Tab B'}，
]
...

我通过在shouldComponentUpdate中请求api来解决这个问题

我今天偶然发现了这个问题，似乎他们现在已经在

react bootstrap

的

选项卡上解决了这个问题，因此，您不必为此使用react router

您应该在选项卡
组件上传递属性unmountenxit
，并且只有当组件处于活动状态时才会装载
参考资料：



我今天偶然发现了这个问题，似乎他们已经在选项卡上解决了这个问题