Estoy haciendo un blog donde necesito que aparezca un botón solo si un usuario selecciona una historia específica, si el usuario selecciona otros informes, el botón no debería aparecer.
Estos informes están en el archivo de rebajas.
Pensé en usar una representación condicional con un estado y uso
{ Show && (<div><div/>) }Aquí está el código donde la parte comentada estaba tratando de hacer algo.
import markdownStyles from './markdown-styles.module.css' import Show_button_1 from './show_button_1' export default function PostBody({ content }) { /*const retornarPagina=()=>{ if(content==_posts.receita_0.md){ return <Show_button_1/> } */ return ( <div className="max-w-2xl mx-auto"> <div className={markdownStyles['markdown']} dangerouslySetInnerHTML={{ __html: content }} /> <Show_button_1/> </div> ) }Intenté hacerlo de esta manera pero no funcionó (30/03/2022)
import React, {useState} from 'react' import markdownStyles from './markdown-styles.module.css' import Show_button_1 from './show_button_1' export default function PostBody({ content }) { const [Show, setShow] = useState(false); const retornarPagina=()=>{ if(content===_posts.receita_0.md){ {setShow(true)} } } return ( <div className="max-w-2xl mx-auto"> <div className={markdownStyles['markdown']} dangerouslySetInnerHTML={{ __html: content }} /> {Show && (<Show_button_1/>)} </div> ) }No estoy seguro de haber entendido la pregunta correctamente, pero una muleta que usé para renderizar componentes condicionalmente fue
{ Show ? (<div><div/>) : (<></>) //doesn't render anything }Esto debería funcionar para ti.
{content === '_posts.receita_0.md' && <Show_button_1/> }Si necesita varias líneas:
{content === '_posts.receita_0.md' && ( <Show_button_1/> )}no podrá usar la representación condicional en un archivo completo, es posible que desee considerar refactorizar su código para enviar un título del archivo de descuento a través de accesorios también. así que harías algo así:
<MyComponent content={document.markdown} title={document.title}/>Entonces puedes hacer fácilmente
{props.title === 'some_title' && <Show_button_1/> }