Digamos que tenemos una página de blog con una clase div de contenido y hay vistas previas de artículos.
Lo que quiero hacer es reemplazar la clase div de contenido con el artículo específico. ¿Cómo puedo conseguir esto?
function Blog() { redirectToArticle(id) = () => { title = getTitle(id) content = getContent(id) {/*## code to replace div 'content' with <Article title={title} content={content}/>*/} } return( <div className="content"> <div onClick={redirectToArticle(1)}> <h1>Article Title 1</h1> <p>Short preview from the article here...</p> </div> </div> ) }Ejemplo de artículo:
class Article extends React.Component { constructor(props) { super(props); this.state = { title: 'Title', content: 'Lorem ipsum dolor sit amet.. . .. . . . . . . . . .'}; } render(){ return( <> <h1>{this.title}</h1> <p>{this.content}</p> </> ) } }¿Por qué le gustaría reemplazar ese div? ¿No es mejor mostrar la miniatura con la información básica + ruta onClick al artículo principal? Recomiendo encarecidamente usar NextJS para eso: los accesorios estáticos lo ayudarán mucho con eso y garantizarán que tenga una buena estructura, pero con un CRA simple también puede hacerlo. Muestre una miniatura con una breve descripción y agregue en Haga clic en una página del artículo con todos los detalles y accesorios pasados.