Tengo tres JSX diferentes en la carpeta de componentes y cada uno de ellos representa una tabla diferente.
Los nombres de funciones dentro de estos JSX son:
El objetivo de este sitio web es cambiar a diferentes funciones de tabla ( <Table1 />,<Table2 />, <Table3 /> ) de acuerdo con la selección en el menú desplegable.
import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import './App.css'; import Table1 from './component/table.jsx'; import Table2 from './component/table2.jsx'; import Table3 from './component/table3.jsx'; import Dropdown from 'react-bootstrap/Dropdown'; function App() { const [value,setValue]=useState(''); const handleSelect=(e)=>{ console.log(e); setValue(e) } function Tab(value) { if (value.toString() == 'Table2') { return <Table2 />; }else if (value.toString()=='Table1') { return <Table1 />; }else { return <Table3 />; } } return ( <div className="app-container"> <Dropdown onSelect={handleSelect}> <Dropdown.Toggle variant="success" id="dropdown-basic"> Dropdown Button </Dropdown.Toggle> <Dropdown.Menu> <Dropdown.Item eventKey="Table1">1</Dropdown.Item> <Dropdown.Item eventKey="Table2">2</Dropdown.Item> <Dropdown.Item eventKey="Table3">3</Dropdown.Item> </Dropdown.Menu> </Dropdown> <h4>You selected {value}</h4> <Tab value={value} /> </div> ); } export default App;Como puede ver, actualmente el menú desplegable va a la cadena correcta, pero desafortunadamente, en la función Pestaña (valor), esto siempre regresa sin importar lo que elija.
Por favor, avíseme qué debo modificar en la función Tab (valor) para que funcione.
El problema es: está obteniendo un object dentro de los function parameters y está comparando ese object con Table 2 y Table 1 .
Así que simplemente cambie su función a esto:
function Tab(e) { if (e.value === 'Table2') { return <Table2 />; } else if (e.value === 'Table1') { return <Table1 />; } else { return <Table3 />; } }Consejo:
Simplemente mueva la Tab fuera del componente de su App y en accesorios debe usar {} para destruir los accesorios para obtener valor:
import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import './App.css'; import Table1 from './component/table.jsx'; import Table2 from './component/table2.jsx'; import Table3 from './component/table3.jsx'; import Dropdown from 'react-bootstrap/Dropdown'; function App() { const [value,setValue]=useState(''); const handleSelect=(e)=>{ console.log(e); setValue(e) } return ( <div className="app-container"> <Dropdown onSelect={handleSelect}> <Dropdown.Toggle variant="success" id="dropdown-basic"> Dropdown Button </Dropdown.Toggle> <Dropdown.Menu> <Dropdown.Item eventKey="Table1">1</Dropdown.Item> <Dropdown.Item eventKey="Table2">2</Dropdown.Item> <Dropdown.Item eventKey="Table3">3</Dropdown.Item> </Dropdown.Menu> </Dropdown> <h4>You selected {value}</h4> <Tab value={value} /> </div> ); } function Tab({value}) { if (value.toString() == 'Table2') { return <Table2 />; }else if (value.toString()=='Table1') { return <Table1 />; }else { return <Table3 />; } } export default App;