Question

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

我正在尝试在第一个标签中渲染de component 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>
            );
        }
    });

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

1 个答案: