React.js-导航中的Bootstrap渲染组件

Question

我有点卡在这里。 我正在使用React引导程序， 导航组件

我有一条称为仪表板的路线。 该路由受保护，只能通过登录访问。

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

我想实现以下目标：

因此，当用户单击BOM X射线时，它会渲染小的组件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组件内部将包含子代。 这些孩子将被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/>组件，如下所示，以保留Nav的格式。 通过将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>

        );
     }
 }