No logro acceder a las props del state, lo que intento hacer es que muestre o no una barra de navegación en función de si una propiedad esta en false o true.
Cuando intento acceder a la propiedad showMainHeader
de esta forma this.props.config.showMainHeader
me da el siguiente error:
Property 'config' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>', no se si tengo que declararlo de alguna forma antes.El console log muestra lo siguiente por si es de utilidad: {config: {…}, dispatch: ƒ}
config: {moduleId: 'HOME_MODULE', showMainHeader: false, showDetailHeader: true, detailTitle: 'Actualidad!'}
dispatch: ƒ (action)
[[Prototype]]: Object
import React, { Component } from 'react'
import { Fragment } from 'react'
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { connect } from 'react-redux'
const navigation = [
{ name: 'Inicio', href: '#', current: true },
{ name: 'Colegio', href: '#', current: false },
{ name: 'Documentos', href: '#', current: false },
{ name: 'Mi perfil', href: '#', current: false },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
function mapStateToProps(state) {
const { configNavigation } = state
return { config: configNavigation }
}
class Navigation extends Component {
constructor (props) {
super(props);
this.state = { config: {} };
}
render () {
console.log(this.props);
return (
<div>
<nav className="md:bg-white bg-teal-600 w-100 md:shadow fixed w-full z-20 top-0 left-0">
<div className="mx-auto max-w-100 px-4 sm:px-6 lg:px-8">
<div className="relative flex h-16 items-center justify-between">
<div className="flex flex-1 items-center justify-start sm:items-stretch sm:justify-start">
<div className="flex flex-shrink-0 items-center">
{/* Phone logo */}
{/* <img className="block h-9 w-auto md:hidden" src="../logo-icofcv-white.svg" alt="Ilustre Colegio Oficial de Fisioterapeutas Comunidad Valenciana" /> */}
{/* Desktop logo */}
<img className="hidden h-9 w-auto md:block" src="../logo-icofcv.svg" alt="Ilustre Colegio Oficial de Fisioterapeutas Comunidad Valenciana" />
</div>
<div className="hidden sm:ml-6 md:block">
<div className="flex space-x-1 desktop-navigation">
<ul className="flex bg-white md:flex-row md:space-x-4 md:mt-0 md:text-sm md:font-medium">
<li>
<a href="/#/" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium active" aria-current="page">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-home mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
Inicio</a>
</li>
<li>
<a href="/#/college" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-building-skyscraper mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="3" y1="21" x2="21" y2="21" />
<path d="M5 21v-14l8 -4v18" />
<path d="M19 21v-10l-6 -4" />
<line x1="9" y1="9" x2="9" y2="9.01" />
<line x1="9" y1="12" x2="9" y2="12.01" />
<line x1="9" y1="15" x2="9" y2="15.01" />
<line x1="9" y1="18" x2="9" y2="18.01" />
</svg>
Colegio</a>
</li>
<li>
<a href="/#/docs" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-files mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M15 3v4a1 1 0 0 0 1 1h4" />
<path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
<path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
</svg>
Documentación</a>
</li>
<li>
<a href="/#/profile" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-user mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
Mi perfil</a>
</li>
</ul>
</div>
</div>
</div>
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<ul className="items-center hidden md:flex">
<li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
<a href="https://twitter.com/Icofcv" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-twitter" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
</svg>
</a>
</li>
<li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
<a href="https://www.youtube.com/channel/UCYDxDmCQ_xfzk0ZnAkMt2WQ?view_as=subscriber" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-youtube" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<rect x="3" y="5" width="18" height="14" rx="4" />
<path d="M10 9l5 3l-5 3z" />
</svg>
</a>
</li>
<li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
<a href="https://www.instagram.com/icofcv/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-instagram" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<rect x="4" y="4" width="16" height="16" rx="4" />
<circle cx="12" cy="12" r="3" />
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
</svg>
</a>
</li>
<li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
<a href="https://www.facebook.com/colegiofisioterapeutascv" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-facebook" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
{/* Navegación móvil */}
{
this.props.config.showMainHeader === false ?
<div className="fixed bottom-0 w-100 h-14 flex justify-around items-center d-none bg-white nav-phone pt-2 z-10">
<a href="/#/" className="flex flex-column items-center active">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-home mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
<span className="btm-nav-label">Inicio</span>
</a>
<a href="/#/college" className="flex flex-column items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-building-skyscraper mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="3" y1="21" x2="21" y2="21" />
<path d="M5 21v-14l8 -4v18" />
<path d="M19 21v-10l-6 -4" />
<line x1="9" y1="9" x2="9" y2="9.01" />
<line x1="9" y1="12" x2="9" y2="12.01" />
<line x1="9" y1="15" x2="9" y2="15.01" />
<line x1="9" y1="18" x2="9" y2="18.01" />
</svg>
<span className="btm-nav-label">Colegio</span>
</a>
<a href="/#/docs" className="flex flex-column items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-files mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M15 3v4a1 1 0 0 0 1 1h4" />
<path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
<path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
</svg>
<span className="btm-nav-label">Documentación</span>
</a>
<a href="/#/profile" className="flex flex-column items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-user mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
<span className="btm-nav-label">Mi perfil</span>
</a>
</div>
:
<div className="fixed bottom-0 w-100 h-14 flex justify-around items-center md:hidden bg-white nav-phone pt-2 z-10">
<a href="/#/" className="flex flex-column items-center active">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-home mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
<span className="btm-nav-label">Inicio</span>
</a>
<a href="/#/college" className="flex flex-column items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-building-skyscraper mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="3" y1="21" x2="21" y2="21" />
<path d="M5 21v-14l8 -4v18" />
<path d="M19 21v-10l-6 -4" />
<line x1="9" y1="9" x2="9" y2="9.01" />
<line x1="9" y1="12" x2="9" y2="12.01" />
<line x1="9" y1="15" x2="9" y2="15.01" />
<line x1="9" y1="18" x2="9" y2="18.01" />
</svg>
<span className="btm-nav-label">Colegio</span>
</a>
<a href="/#/docs" className="flex flex-column items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-files mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M15 3v4a1 1 0 0 0 1 1h4" />
<path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
<path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
</svg>
<span className="btm-nav-label">Documentación</span>
</a>
<a href="/#/profile" className="flex flex-column items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-user mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
<span className="btm-nav-label">Mi perfil</span>
</a>
</div>
}
</div>
)
}
}
export default connect(mapStateToProps)(Navigation)