props.children 의 props 제어하기, 가져오기

tabs.js 를 만들면서 this.props.children 를 제어했다

this.props.children 제어

React.Children.forEach(this.props.children, (child, index) => {
  child.type.displayName // TagName 참조
  child.props // properpty 를 참조
  child.key // key 와 같이 props 에 없는 것은 직접 참조
})

child.type.displayName 가 styled.div 처럼 원하는 값으로 오지 않으면

styled 로 만들어서 이다. 이럴때는

const Tag = styled.div``
Tag.displayName = `Tag`

로 하면 child.type.displayName 로 TagName 을 참조 할 수 있다

props.children 의 정보로 새로운 Tag 만들기

render() {
  let tabs = []
  React.Children.forEach(this.props.children, (child, index) => {
    tabs.push(React.cloneElement(<Tab>{child.key}</Tab>, { key }))
  })

  return tabs
}