Tag: HIGHER-ORDER-COMPONENTS
Quiero aplicar un diseño a una página como en el siguiente enlace: https://nextjs.org/docs/basic-features/layouts#per-page-layouts Pero mi página tiene una diferencia, está envuelta con un HOC, por lo que apliqué “getLayout” al componente de orden superior mismo de esta manera: PageWithAuth.getLayout Pero me da este error: https://i.stack.imgur.com/VVtAR.jpg La página se ve así: . . . Read more
Esta es la clase de Componente de Orden Superior token es la prop que quiero incluir import React from “react”; export function requireAuthentication(Component) { return class AuthenticatedComponent extends React.Component { isAuthenticated() { return this.props.isAuthenticated; } render() { const token = this.props.token; return ( <div> {this.isAuthenticated === true ? <component token=”{token}” . . . Read more
Estoy intentando crear un componente de función React Hover (enlace a un sandbox) que brindará comportamientos de hover a cualquier elemento {children}, es decir, sus ganchos y métodos internos: function WithHover({ children }) { const [hover, setIsHover] = React.useState(null); const [hoverText, setHoverText] = React.useState(“”); const mouseOver = () => setIsHover(true); . . . Read more
Quería crear un HOC de autoactualización que se pareciera más o menos a esto: export function withAutoRefresh(WrappedComponent) { return class extends React.Component { constructor(p: Readonly) { super(p); } interval: NodeJS.Timeout; componentDidMount() { this.interval = setInterval(() => theFunctionToRefreshWhichIsFromTheWrappedComponent(), 5000) } componentWillUnmount() { clearInterval(this.interval) } render() { return ( ); } }; . . . Read more
Básicamente, he creado un HOC para dos páginas en mi aplicación Next.js (es decir, “perfil” y “dashboard”) para evitar que los usuarios accedan a ellas si no están autorizados. Ejemplo: “pages/profile.js” import withAuth from “../components/AuthCheck/index”; function Profile() { return ( <> Profile ) } export default withAuth(Profile); Mi componente/HOC de . . . Read more