Soy nuevo en React.js y estoy tratando de sustituir una parte de un retorno jsx que estoy repitiendo en un componente de reacción, pero hay ligeras diferencias en cada repetición, así que quiero pasar un booleano simple como parámetro a la variable. para que pueda verificarlos dentro de jsx. Esto es lo que he hecho hasta ahora:
function links(condition){
console.log("Condition is: " + condition);
return(<h1 className={`mr-10 ${ condition === true ? 'flex' : 'hidden' }`>Test</h1>);
}
const Navbar = () => {
return( <nav>
<div> {links.call(false)} </div>
<div> {links.call(true)} </div>
</nav>
); }
Esto devuelve la Condition is: luego la Condition is: Undefined en la consola. ¿Cómo puedo conseguir esto?
Ahí abajo puedes ver la forma "correcta" de usar React.js:
function Links({ condition }) {
return(
<h1 className={`mr-10 ${ condition === true ? 'flex' : 'hidden' }`>
Test
</h1>
);
}
const Navbar = () => {
return(
<nav>
<div>
<Links condition={false} />
</div>
<div>
<Links condition={true} />
</div>
</nav>
);
}
Nota:
link => Link<Component {...props} />