如何使用一个div在ReactJS选项卡中输出动态内容？

Question

我正在使用标签来渲染组件。我希望能够通过单击选项卡来显示来自不同组件的内容。检查此屏幕截图：

挑战在于我如何使用一页来显示不同的标签？

我的代码在这里：

import React from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';
import classnames from 'classnames';

  

要渲染的导入组件

import DataElements from './DataElements'
import Datasets from './Datasets'
import FacilityList from './FacilityList'
import Indicators from './Indicators'

import OrganisationUnits from './OrganisationUnits'

  

该组件可帮助我导航

export default class Navigator extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      activeTab: '1'
    };
  }

  toggle(tab) {
    if (this.state.activeTab !== tab) {
      this.setState({
        activeTab: tab
      });
    }
  }
  render() {
    return (
      <div>
        <Nav tabs>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '1' })}
              onClick={() => { this.toggle('1'); }}
            >
              Organisation Units
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '1' })}
              onClick={() => { this.toggle('1'); }}
            >
              Facility List
            </NavLink>
          </NavItem>

          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '1' })}
              onClick={() => { this.toggle('1'); }}
            >
              Data Sets
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '1' })}
              onClick={() => { this.toggle('1'); }}
            >
              Data Elements
            </NavLink>
          </NavItem>

          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '1' })}
              onClick={() => { this.toggle('1'); }}
            >
              Indicators
            </NavLink>
          </NavItem>

          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '2' })}
              onClick={() => { this.toggle('2'); }}
            >
              Data Elements
            </NavLink>
          </NavItem>
        </Nav>
        //tab 2
          <TabPane tabId="2">
            <Row>
              <Col sm="6">
                <Card body>
                  <CardTitle></CardTitle>
                  <CardText></CardText>



//component- working for now. its what is in the screenshot

                  <div> <DataElements /> </div>
                  <Button color="success">Download pdf</Button>{' '}
                </Card>
              </Col>
            {/*  <Col sm="6">
                <Card body>
                  <CardTitle>Special Title Treatment</CardTitle>
                  <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                  <Button>Go somewhere</Button>
                </Card>
              </Col> */}
            </Row>
          </TabPane>
        </TabContent>
      </div>
    );
  }
}
`

如您所见，我拥有所有其他组件。 屏幕截图显示了最后一个选项卡的内容。

Answer 1

您最好的办法是利用反应路由器和 props.match ， 和 。

<TabPane tabId="2">
  <Row>
    <Col sm="6">
      <Card body>
        <CardTitle></CardTitle>
        <CardText></CardText>
        <Switch>
          <Route
            exact
            path="/myRoute/myTabId1"
            render={props => (
              <MyComponentId1
                {...props}
              />
            )}
          />
          <Route
            exact
            path="/myRoute/myTabId2"
            render={props => (
              <MyComponentId2
                {...props}
              />
            )}
          />

        {/* [...other routes] */}
        </Switch>
        <Button color="success">Download pdf</Button>{' '}
      </Card>
    </Col>
  </Row>
</TabPane>

在菜单上：

<NavItem>
  <NavLink
    className={classnames({ active: this.state.activeTab === '1' })}
    tag={Link}
    to='/myRoute/myTabId1'
  >
    Organisation Units
  </NavLink>
</NavItem>

我希望它能帮助您，伴侣。

Answer 2

尝试一下。每次单击新选项卡时都要更改activeKey，这会更改状态，因此组件将使用新键作为活动选项卡再次呈现。

export default class  A extends Component
{
 constructor(props)
{
    super(props);
    this.state={
     activeKey:"TabName1"
    }
    this.handleSelect=this.handleSelect.bind(this)
    this.renderKey=this.renderKey.bind(this)

  }
  handleSelect(activeKey){

       this.setState({activeKey})
  }

  renderKey(){
    var key=this.state.activeKey
    switch(key)
     {
       case "TabName1" : return <Tab1/>// dont forget to import this component
       case "TabName2" : return <Tab2/>
       case "TabName3" : return <Tab3/>
       default : return  <Tab1/>
     }
  }  
render()
{  const key=this.renderKey();

  return (
    <div >
        <Nav bsStyle="tabs" activeKey={this.state.activeKey} onSelect={k => 
        `enter code here`this.handleSelect(k)} className="child-tab">
            <NavItem eventKey="TabName1" >
            TabName1
            </NavItem>
            <NavItem eventKey="TabName2" >
            TabName2
            </NavItem>
            <NavItem eventKey="TabName3" >
            TabName3
            </NavItem>
        </Nav>
        <div >
          {key} // This is where the new tab component renders
        </div>

    </div>    
   )
  }

 }