재질 탭에서 활성 탭 구성

Question

현재 프로젝트의 필수 라이브러리로 재료 ui를 사용하고 있습니다. 프로젝트 페이지에는 네 개의 탭이 필요하므로 재료 UI 라이브러리의 탭 구성 요소를 사용하고 있습니다.

기본적으로 탭이 포함 된 페이지를 렌더링 할 때 첫 번째 탭이 활성 탭입니다. 네 번째 탭을 활성으로 설정하려고합니다.

설명서에서 Tab의 "값"을 볼 수 있습니다. 그래서 각 탭에 대해 네 개의 탭 값을 각각 1,2,3 및 4로 설정했습니다. 각각의 화면으로 이동하면, 나는 4로 내 가게에서 속성 탭 값을 설정하는 작업을 파견합니다.

그럼 mapStateToProps 내 구성 요소에 액세스 할 수있는이 속성을 만들었지 만. 그래서 내가 페이지에 들어갈 때의 값은 4이지만 여전히 활성 탭이 첫 번째 값입니다. 내가 당신에게 내 코드를 보여 드리죠 :

const mapStateToProps = state => ({ 
    value: state.get('tabValue'); 
}); 

const mapDispatchToProps = dispatch => ({ 
tabClicked:() => setActiveTab('tabValue', 4) 
}) 

그리고 내 구성 요소 :

const Tabs = ({ value }) => (
<Tabs> 
    <Tab value={1}></Tab> 
    .... 
    <Tab value={value}</Tab> 
</Tabs 

)

Answer 1

당신이 기본 사용 initialSelectedIndex하여 다른 탭을 선택하십시오. 이 형태의

<Tabs initialSelectedIndex={value}> 
    <Tab value={1}></Tab> 
    ... 
    <Tab value={4}></Tab> 
</Tabs> 

확인 http://www.material-ui.com/#/components/tabs