React-bootstrap - TABS 组件 - 渲染子组件答案

【问题标题】：React-bootstrap - TABS component - render children componentsReact-bootstrap - TABS 组件 - 渲染子组件
【发布时间】：2017-06-22 14:01:45
【问题描述】：

我正在尝试像这样在每个 react-bootstrap 的选项卡中呈现子组件。但我真的不明白它是如何工作的。看看这个。

我正在尝试在第一个选项卡中呈现 de 组件 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;

【问题讨论】：

标签： reactjs tabs react-bootstrap

【解决方案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>
            );
        }
    });

【讨论】：