Quiero obtener valor de los componentes secundarios a los componentes principales.
Aquí está mi código.
//este es un componente secundario
import { React } from "react"; const Tab = () => { const changeTab = (index) => { console.log(index); }; return ( <> <div className="flex gap-10"> <button onClick={() => changeTab(1)} className="bg-gray-700 p-2 text-white" > btn1 </button> </div> </> ); }; export default Tab;//este es el componente principal
import React from "react"; import Nav1 from "./Components/Navbar/Nav1"; import Tab from "./Tab"; const App = () => { return ( <> <Tab /> <div> <Nav1 /> </div> </> ); }; export default App;Quiero registrar el valor del índice en un componente principal que provenía de un elemento secundario.
defina changeTab en el componente principal y páselo a través de accesorios a Tab .
padre:
import React from "react"; import Nav1 from "./Components/Navbar/Nav1"; import Tab from "./Tab"; const App = () => { const changeTab = (index) => { console.log(index); }; return ( <> <Tab changeTab={changeTab}/> <div> <Nav1 /> </div> </> ); }; export default App;y componente hijo:
import { React } from "react"; const Tab = ({changeTab}) => { const onChangeTab = (index) => { changeTab(index); // other stuff }; return ( <> <div className="flex gap-10"> <button onClick={() => onChangeTab(1)} className="bg-gray-700 p-2 text-white" > btn1 </button> </div> </> ); }; export default Tab;Puedes usar la API de contexto:
https://reactjs.org/docs/context.html
O puede transferir la función changeTab al componente principal y pasarla como accesorio
Su problema es común (con la mayoría de las personas). Y la solución es levantar el estado ( React docs ). Lo que básicamente significa que tendrá que mantener el estado en el componente principal y pasar el valor y el método al componente secundario.
// App.jsx import React from "react"; import Nav1 from "./Components/Navbar/Nav1"; import Tab from "./Tab"; const App = () => { const changeTab = (index) => { console.log(index); }; return ( <> <Tab handleTabChange={changeTab}/> <div> <Nav1 /> </div> </> ); }; export default App; import { React } from "react"; const Tab = (props) => { const changeTab = (index) => { props.handleTabChange(index); }; return ( <> <div className="flex gap-10"> <button onClick={() => changeTab(1)} className="bg-gray-700 p-2 text-white" > btn1 </button> </div> </> ); }; export default Tab;