Soy bastante nuevo para reaccionar y me gusta, pero la flexibilidad me da algunos dolores de cabeza, cuáles son las mejores prácticas.
Por ejemplo, tengo este componente, un botón de inicio de sesión condicional.
const dynamicLogin = () => { if (ctx.isLoggedIn) { return ( <button className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800" onClick={ctx.onLogout} > Logout </button> ); } else { return ( <button className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800" onClick={ctx.onLogin} > Login </button> ); } }; Lo renderizo llamando a la función es mi declaración de return .
return ( <div> {ctx.visible ? <Warenkorb></Warenkorb> : ""} <nav className="flex justify-between px-4 bg-red-400 text-white text-xl fixed top-0 left-0 w-full"> <div> <h3 className="p-4 inline"> {ctx.isLoggedIn ? "Eingeloggt!" : "Not Logged In"} </h3> {dynamicLogin()} </div> {dynamicWarenkorb()} ...Para ser honesto, la sintaxis comienza a parecer bastante desordenada, pero de alguna manera funciona. Pero llamar a una función dentro de la declaración de devolución se siente MUY INCORRECTO. ¿Es la forma en que renderizo bien mis componentes o hay una forma mejor/más rápida de hacerlo? La documentación parece no ser muy útil, porque la mayoría de las cosas son sobre componentes basados en clases :-/.
Creo que usar componentes es más limpio que funciones en instancias como esta. Por ejemplo, podría crear un componente AuthButton como tal:
export function AuthButton({ ctx }) { if (ctx.loggedIn) { return ( <button className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800" onClick={ctx.onLogout} > Logout </button> ); } return ( <button className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800" onClick={ctx.onLogin} > Login </button> ); }Entonces puedes llamarlo en tu otro componente:
import { AuthButton } from './AuthButton'; function OtherComponent() { return ( <div> {ctx.visible ? <Warenkorb></Warenkorb> : ""} <nav className="flex justify-between px-4 bg-red-400 text-white text-xl fixed top-0 left-0 w-full"> <div> <h3 className="p-4 inline"> {ctx.isLoggedIn ? "Eingeloggt!" : "Not Logged In"} </h3> <AuthButton ctx={ctx} /> </div> {dynamicWarenkorb()} </nav> ... </div> ); }Así es como puede hacerlo, puede colocar el siguiente fragmento de código justo donde llamó a la función y deshacerse del resto
{ctx.isLoggedIn ? ( <button className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800" onClick={ctx.onLogout} > Logout </button> ) : ( <button className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800" onClick={ctx.onLogin} > Login </button> )}