Esta es la clase de componente de orden superior
token es el prop que quiero incluir
import React from "react"; export function requireAuthentication(Component) { return class AuthenticatedComponent extends React.Component { isAuthenticated() { return this.props.isAuthenticated; } render() {; return ( <div> { this.isAuthenticated === true ? <Component token={token} {...this.props} /> } </div> ); } }; } export default requireAuthentication; Cuando accedo a los props del Component , obtengo props.token como undefined . ¿Hay alguna manera de pasar nuevos apoyos?
Supongo que necesita obtener el token para el componente si el componente tiene otro accesorio llamado isAuthenticated . Puedes hacerlo como a continuación.
import React from "react"; export function requireAuthentication(Component) { return class AuthenticatedComponent extends React.Component { isAuthenticated() { return this.props.isAuthenticated; } render() { return ( <div> {this.props.isAuthenticated === true ? ( <Component token={"this_token_is_retrieved_by_requireAuthentication"} {...this.props} /> ) : ( <Component {...this.props} /> )} </div> ); } }; } const MyComp = requireAuthentication(({ token }) => { return <div>token: {token}</div>; }); export default function App() { return ( <div className="App"> <MyComp isAuthenticated={true} /> <MyComp isAuthenticated={false} /> </div> ); }