reactjs - 如何在 react Bootstrap 的选项卡内添加 if else

Question

我尝试执行以下代码，但出现一些错误。 错误:ReactBootstrap:Tab 组件不应该被渲染!它是一个抽象组件，仅作为 Tabs 组件的直接子组件有效。对于自定义选项卡组件，直接使用 TabPane 和 TabsContainer。

import { Row, Col, Tabs, Tab } from "react-bootstrap";
import One from "../One.jsx";
//One,Two .. etc There are more

render(
  <Tabs>
        <Tab eventKey={1} title="Tab 1"><One/></Tab>                           
        <Tab eventKey={2} title="Tab 2"><Two/></Tab>                           
        <Tab eventKey={3} title="Tab 3"><Three/></Tab>   
  {this.state.type === type && (
        <Tab eventKey={4} title="Tab 4"><Four/></Tab>                           
        <Tab eventKey={5} title="Tab 5"><Five/></Tab>                           
        <Tab eventKey={6} title="Tab 6"><Six/></Tab>  
 )}
  </Tabs>
)

Answer 1

我偶然发现了这个解决方案。

我曾经将组件名称声明为 Tab无需从 'react-bootstrap' 导入并且使用 JSX 条件渲染没有任何问题

但是当我将组件名称更改为另一个名称时，我发现错误来自 'react-bootstrap'我的 JSX 条件渲染不再起作用，因为 'react-bootstrap'不会接受 JSX 速记片段或任何内容。

所以我声明空组件来处理错误并使用 <>...</>在 JSX 条件渲染中，一切都适合我。

import React from "react";
import { Tabs } from "react-bootstrap";
    
const Tab = () => {
  return <></>; 
};
    
export const App = (props) => {
  return(
    <Tabs>
      <Tab eventKey={1} title="Tab 1"><One/></Tab>                           
      <Tab eventKey={2} title="Tab 2"><Two/></Tab>                           
      <Tab eventKey={3} title="Tab 3"><Three/></Tab>   
      {props.type === type && (
        <>
          <Tab eventKey={4} title="Tab 4"><Four/></Tab>                           
          <Tab eventKey={5} title="Tab 5"><Five/></Tab>                           
          <Tab eventKey={6} title="Tab 6"><Six/></Tab>  
        </>
      )}
    </Tabs>
  )
}

放在上面并不是一个好的做法，但是很容易声明条件。

如果您想进行更好的练习，请使用此选项。

import React from "react";
import { Tabs, Tab } from "react-bootstrap";
        
export const App = (props) => {
  return(
    <Tabs>
      <Tab eventKey={1} title="Tab 1"><One/></Tab>                           
      <Tab eventKey={2} title="Tab 2"><Two/></Tab>                           
      <Tab eventKey={3} title="Tab 3"><Three/></Tab>   
      {props.type === type && <Tab eventKey={4} title="Tab 4"><Four/></Tab>}
      {props.type === type && <Tab eventKey={5} title="Tab 5"><Five/></Tab>}
      {props.type === type && <Tab eventKey={6} title="Tab 6"><Six/></Tab>}
    </Tabs>
  )
}