Estado inicial predeterminado con valor de propiedad
activeTab se mantiene en TabContext . No puedo establecer el estado predeterminado aquí porque no sé cómo acceder al valor prop del componente Tab en un componente TabContext .
TabContext.js
const TabContext = createContext(); export function useTab() { return useContext(TabContext); } const TabProvider = ({ children }) => { const [activeTab, setActiveTab] = useState(); const toggleTab = (title) => { setActiveTab(title); }; return ( <TabContext.Provider value={[activeTab, toggleTab]}> {children} </TabContext.Provider> ); }; export default TabProvider;Uso
<TabProvider> <TabContainer> <Tab title='One' defaultTab/> <Tab title='Two' /> </TabContainer> </TabProvider> Componente de Tab
activeTab mediante el gancho useTab()toggleTab establece el estado en cualquiera que sea la entrada.useEffect() , pero dado que el estado cambia, crea un bucle infinito y la pestaña activa está atascada en el title del Componente de Tab . const Tab = ({ title, defaultTab }) => { const [activeTab, toggleTab] = useTab(); useEffect(() => { if (defaultTab) { toggleTab(title); } }, []); return ( <div className={(activeTab === title ? 'text-blue-600' : 'text-gray-900')} onClick={() => { toggleTab(title); }} > {title} </div> ); }; Resultado deseado: El estado predeterminado activeTab es el valor de prop del title del componente Tab cuando tiene la prop defaultTab y permite cambiar el estado después en función del clic. También se requiere la propiedad de pestaña TabContainer para uno de los componentes de pestaña en defaultTab
¿El componente Tab puede tener varios title o un solo valor (como 'Uno', 'Dos')? Si es así, es correcto usar el componente useTab en cada componente Tab . Y si está tratando de seleccionar la pestaña uno de forma predeterminada, puede cambiar su componente de Tab como se muestra a continuación:
const Tab = ({ title, defaultTab }) => { const [activeTab, toggleTab] = useTab(); return ( <div className={(activeTab === title || defaultTab ? 'text-blue-600' : 'text-gray-900')} onClick={() => { toggleTab(title); }} > {title} </div> ); };Según tengo entendido, está intentando seleccionar cualquier pestaña de forma predeterminada y cambiar el estado después.