이 모든 반작용 - 부트 스트랩 탭 렌더링 기능이있는 탭이

Question

을 선택한 관계없이 때마다 호출되는 다음은 내 코드입니다 :

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>              
    );                   
    }                    
});  

탭의 변화가있을 때마다 나는,이다 나타났습니다 것은, 모든 탭의 렌더링 기능이 선택되었는지 여부에 관계없이 호출되며 이는 한 번이 아니라 3 번 발생합니다. 이것은 약간의 절름발이예요. 그러나 각 탭마다 많은 콘텐츠가 있다면 위에서 설명한 동작은 확실히 웹 페이지의 성능에 영향을 주어 느려지 게 만듭니다. 논리적으로 모든 탭의 렌더링 기능이 각각의 모든 변경 사항에 대해 호출되어서는 안되기 때문에 잘못된 것이나 반응하는 부트 스트랩 탭이있는 버그입니다.

Answer 1

반응 부트 스트랩 Tabs 구성 요소에는 실제 탭이 DOM에 실제로 존재하는 유일한 원인이되는 부울 속성 unmountOnExit이 있습니다.