es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Tag: HIGHER-ORDER-COMPONENTS

Diseño por página para páginas envueltas con HOC usando TypeScript.

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

Reaccionar: Incluye una nueva propiedad al Componente Hijo en el Componente de Orden Superior

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

Componente funcional de React HOC: Cómo hacer que cualquier hijo tenga el estado y la lógica del componente padre.

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

¿Existe alguna forma de crear un HOC que utilice métodos del WrappedComponent?

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

Next.js: ¿Cómo prevenir el destello de la ruta/página no autorizada antes de redirigir al implementar una ruta privada?

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