React-bootstrap - TABS組件 - 渲染子組件

Question

我試圖在每個react-bootstrap的選項卡中像這樣渲染子組件。但我真的不明白它是如何工作的。一探究竟。

我試圖在第一個選項卡內呈現組件subNavbarDashboard。

import React, { Component } from 'react'; 
import './navbar.css' 
import Tabs from 'react-bootstrap/lib/Tabs'; 
import Tab from 'react-bootstrap/lib/Tab'; 
import SubNavbarDashboard from '../SubNavbar/subNavbar'; 

const ControlledTabs = React.createClass({ 
    getInitialState() { 
     return { 
      key: 1 
     }; 
    }, 

    handleSelect(key) { 
     this.setState({ key }); 
     if (key === 1) { 
      alert(1); 
      this.setState(<SubNavbarDashboard />); 

     } 
    }, 

    render(props) { 
     return (
      <div className="submenu" class="row"> 
       <div class="col"> 
        <Tabs activeKey={this.state.key} onSelect={this.handleSelect} id=""> 
         <Tab eventKey={1} title="Dashboard">Dashboard</Tab> 
         <Tab eventKey={2} title="Feedback">Feedback</Tab> 
         <Tab eventKey={3} title="Historial" >Historial</Tab> 
        </Tabs> 
        <div title="Dashboard"> 
         hola 
        </div> 
        <div title="Feedback"> 
         hola 2 
        </div> 
        <div title="Historial"> 
         hola 3 
        </div> 
       </div> 
      </div> 
     ); 
    } 
}); 

class Navbar extends Component { 
    render() { 
     return (
      <div> 
       <ControlledTabs 
        dashboard={ 
         <SubNavbarDashboard /> 
        } 
       /> 
      </div> 
     ); 
    } 
} 
export default Navbar; 

Answer 1

一般我們在操作選項卡中單擊該組件在運行時

const ControlledTabs = React.createClass({ 
     getInitialState() { 
      return { 
       key: 1 
      }; 
     }, 
     handleSelect(key) { 
      this.setState({ key }); 
     }, 

     render(props) { 
      let component; 
      if(this.state.key == 1) 
       component=<div title="Dashboard"><SubNavbarDashboard /></div> 

      return (
       <div className="submenu" class="row"> 
        <div class="col"> 
         <Tabs activeKey={this.state.key} onSelect={this.handleSelect} id=""> 
          <Tab eventKey={1} title="Dashboard">Dashboard</Tab> 
          <Tab eventKey={2} title="Feedback">Feedback</Tab> 
          <Tab eventKey={3} title="Historial" >Historial</Tab> 
         </Tabs> 
         {component} 
        </div> 
       </div> 
      ); 
     } 
    });