Question

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

我有一个名为dashboard的路线。该路线受到保护，只能通过登录获得。

当用户导航到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中，我会捕获ws点击并基于该渲染组件的内容？

Answer 1

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

 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 - Nav中的Bootstrap渲染组件

1 个答案: