Tab 관련 질문드립니다.

[윤준호]

코드는, 

<Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
                  <Nav.Item>
                    <Nav.Link eventKey="link-0" onClick={ ()=>{ 누른탭변경(0) }}>1</Nav.Link>  
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link eventKey="link-1" onClick={ ()=>{ 누른탭변경(1) }}>2</Nav.Link>
                  </Nav.Item>      
                </Nav>
                 
                <TabContent 누른탭={누른탭}/>

          </div>
      </div>
    )
  }

function TabContent(props){
  if (props.누른탭 === 0){
    return <div>111이게 아래로 가야 하는데 왜 위에 있는 걸까요?</div>
  } else if (props.누른탭 === 1){
    return <div>222이게 아래로 가야 하는데 왜 위에 있는 걸까요!!!!!!!!?</div>
  } else if (props.누른탭 === 2){
    return <div>내용2</div>
  }
}

와 같습니다. 샘 코드랑 똑같이 쳤는데, 해당 탭을 눌렀을 경우, 원하는 글씨(return)되는 글씨의 위치가 

tab아래 나와야 하는데 저렇게 나오네요... 뭐가 문제일까요?

[codingapple]

위가 아니라 나란히 옆에있을 수도 있습니다 

<Nav>를 <div>안에 넣거나 스타일을 바꾸거나 bootstrap UI 복사붙여넣기를 잘해봅시다

[윤준호]

                <div>
                <Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
                  <Nav.Item>
                    <Nav.Link eventKey="link-0" onClick={ ()=>{ 스위치변경(false); 누른탭변경(0) }}>1</Nav.Link>  
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link eventKey="link-1" onClick={ ()=>{ 스위치변경(false); 누른탭변경(1) }}>2</Nav.Link>
                  </Nav.Item>
                </Nav>
                </div>

                <div>
                <CSSTransition in={스위치} classNames="wow" timeout={500}>  
                  <TabContent 누른탭={누른탭}/>
                </CSSTransition>
                </div>

이렇게 스타일을 바꿔보기도 했고, bootstrap UI 복붙을 다시 해봤는데도 바뀌지가 않네요... 뭐가 문제일까요...ㅜ?

아니면 다른 해결방법 있을까요? 이해가 안되네요... 똑같이 했는데..

[codingapple]

react-bootstrap사이트에서 nav 말고 <Tab>을 찾아서 붙여넣기해봅시다 

[윤준호]

<div></div> 태그로 위아래를 넓게 포함시키니 해결됐습니다.!

[글쓴이]

글