基于React的Tab组件

Tabs

renderHeader = () => {    return React.Children.map( this.props.children , (element,index) => {      const activeStyle = element.key === this.state.activeKey ? "activeTitle" : null;      return (           {                this.setState({                  activeKey: element.key                })              }}              className={classnames("title", activeStyle)}          >            {element.props.title}                )    })  }  renderContent = () => {    return React.Children.map( this.props.children , (element,index) => {      if (element.key === this.state.activeKey) {        return (
    
     {element.props.children}
    
)      }    })  }  render() {    return (        
    
          
     
      {this.renderHeader()}
     
          
     
      {this.renderContent()}
     
        
    
    )  }

TabPane

render() {    return (        
    
          
     
      {this.props.title}
     
          
     
      {this.props.children}
     
        
    
    )  }

调用

render() {    return (        
    
          
                 
      
       content1
                  
      
       content2
                
             
    
    )  }