React.js - Bootstrap 在 Nav 中渲染组件

Question

我有点卡在这里。我正在使用 React bootstrap、Navigation component

我有一条名为仪表板的路线。该路线受保护，只能通过登录使用。

当用户导航到 Dahsboard 时，这就是我完成的：

我想实现这样的目标：

因此，当用户单击 BOM X-ray 时，它会呈现小组件 Children 1,2 和 3。

这是渲染第一张图片的代码：

import React from 'react'
import Bom from './bomxray/Indexbom';

import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';

class Dashboard extends React.Component {
   handleSelect(event, selectedKey) {
       //event.preventDefault();
       alert('selected ' + selectedKey);
   }
render() {
    return (
        <Nav bsStyle="tabs" activeKey={1} onSelect={this.handleSelect}>
            <NavItem eventKey={1} >Bom X-Ray</NavItem>
            <NavItem eventKey={2} title="Item">Calculation</NavItem>
            <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
            <NavDropdown eventKey={4} title="Dropdown" id="nav-dropdown">
                <MenuItem eventKey="4.1">Action</MenuItem>
                <MenuItem eventKey="4.2">Another action</MenuItem>
                <MenuItem eventKey="4.3">Something else here</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey="4.4">Separated link</MenuItem>
            </NavDropdown>
        </Nav>
    );
 }
export default Dashboard

我的想法是创建组件：

import Bom from './bomxray/Indexbom';

并且 Bom 组件将在内部包含 Children。那些 children 将是服务器的 CRUD Ajax。

我试过这样的事情（失败）：

 <NavItem eventKey={1} <Bom />>Bom X-Ray</NavItem>

还有这个（渲染它，但一切都搞砸了）：

<NavItem eventKey={1} >Bom X-Ray</NavItem> <Bom />

如果我在正确的轨道上，请知道如何继续。如果我完全走错了路，请指出正确的方向:)

编辑（添加了可能的解决方案）。我刚刚想到，我确实有：

handleSelect(event, selectedKey) {       
    alert('selected ' + selectedKey);
}

我能以某种方式动态渲染组件吗？在 handeSelect 中，我捕捉到了点击的内容并基于该渲染组件？

Answer 1

我建议您在 <Nav> 之外渲染 <Bom/> 组件，如下所示，以保留导航的格式。您可以通过在状态中设置 activeKey 来控制通过 handleSelect 函数显示的组件。

 class Dashboard extends React.Component {
    getInitialState(){
        return({activeKey: 1})
    }
    handleSelect(selectedKey, event) {
        //event.preventDefault();
        alert('selected ' + selectedKey);
        this.setState({activeKey: selectedKey});
    }
    render() {
        return (
            <div>
                <Nav bsStyle="tabs" activeKey={this.state.activeKey} onSelect={this.handleSelect}>
                    <NavItem eventKey={1} >Bom X-Ray</NavItem>
                    <NavItem eventKey={2} title="Item">Calculation</NavItem>
                    <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
                    <NavDropdown eventKey={4} title="Dropdown" id="nav-dropdown">
                        <MenuItem eventKey="4.1">Action</MenuItem>
                        <MenuItem eventKey="4.2">Another action</MenuItem>
                        <MenuItem eventKey="4.3">Something else here</MenuItem>
                        <MenuItem divider />
                        <MenuItem eventKey="4.4">Separated link</MenuItem>
                    </NavDropdown>
                </Nav>

                {this.state.activeKey == 1 ? <Bom/> : null}
                {this.state.activeKey == 2 ? <CalculationComponent/> :null}
            </div>

        );
     }
 }

React.js - Bootstrap 在 Nav 中渲染组件

React.js - Bootstrap render component in Nav

javascript

css

twitter-bootstrap

reactjs

react-bootstrap