Tengo un componente que usa el estado y la acción de un contexto. En una parte diferente de mi aplicación, he creado un contexto diferente pero quiero reutilizar el mismo componente. ¿Puede sugerir alguna forma estándar/elegante de hacerlo?
import React from 'react' const Sidebar = () => { const {state, action} = useDashboard(); return ( <div>...</div> ) } export default SidebarAhora quiero usar esto:
const Sidebar = () => { const {state, action} = usePlotter(); return ( <div>...</div> ) } export default SidebaruseDashboard, usePlotter son ganchos que proporcionan useContext().
Mueve la lógica de la condición al interior de otro gancho:
const useDashboardOrPlotter = (condition: boolean) => { const {stateDashboard, actionDashboard} = useDashboard(); const {statePlotter, actionPlotter} = usePlotter(); return condition ? {stateDashboard, actionDashboard} : {statePlotter, actionPlotter} } const Sidebar = () => { ... condition const {state, action} = useDashboardOrPlotter(condition); return ( <div>...</div> ) }Puede usar así en el mismo componente.
const {state: plottState, action: plottAction} = usePlotter(); const {state: dashboardState, action: dashboardAction} = useDashboard(); ahora use plottState , plottAction , dashboardState , dashboardAction