小编mic*_*e b的帖子

无论选择哪个选项卡,每次都会调用所有React-bootstrap选项卡渲染函数

以下是我的代码:

var WholeTab=React.createClass                                                 
({                                                                             
  getInitialState:function()                                                   
  {                                                                            
    return {                                                                   
      key: 1                                                                   
    };                                                                         
  },                                                                           
  handleSelect:function(key)                                                   
  {                                                                            
    this.setState({key});                                                      
  },                                                                           
  render:function()                                                            
  {                                                                            
    return (                                                                   
      <Tabs defaultActiveKey={1} id="controlled-tab-example">                  
        <Tab eventKey={1} title="Tab 1"><One/></Tab>                           
        <Tab eventKey={2} title="Tab 2"><Two/></Tab>                           
        <Tab eventKey={3} title="Tab 3"><Three/></Tab>                         
      </Tabs>                                                                  
    );                                                                         
  }                                                                            
});                                                                            
var One=React.createClass({                                                    
  render:function(){                                                           
    alert("one");                                                              
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});                                                                            
var Two=React.createClass({                                                    
  render:function(){                                                           
    alert("two");                                                              
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});                                                                            
var Three=React.createClass({                                                  
  render:function(){                                                           
    alert("three");                                                            
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});     
Run Code Online (Sandbox Code Playgroud)

我注意到的事情是,每当标签发生变化时,所有标签的渲染功能都会被调用,无论它们是否被选中,这种情况不会发生一次,而是发生3次.这只是一个蹩脚的例子,但如果我在每个标签中都有很多内容,我上面描述的行为肯定会影响网页的性能并使其变慢.我做错了什么或者这是react-bootstrap选项卡的错误,因为逻辑上不应该在每次更改时调用所有选项卡的render函数.

javascript tabs reactjs react-bootstrap

6
推荐指数
1
解决办法
834
查看次数

如何从Chrome扩展程序中获取设备名称(或主机名)?

有没有办法从Chrome扩展程序中检索设备名称?

理想情况下,我想获得新标签页上"其他设备"菜单中显示的相同字符串...这些信息是否可用于扩展程序?

或者,主机名是否可用?

我设法获得的是访问用户代理window.navigator.userAgent,但就是这样......

google-chrome google-chrome-extension google-chrome-app

5
推荐指数
2
解决办法
2万
查看次数