如何用组件替换页面

Question

假设我们有一个内容为div类的博客页面，上面有文章的预览。

我想做的是将内容的div类替换为特定的文章。我怎样才能做到这一点呢?

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>
)
}

文章的例子:

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>
</>
)
}

}

Answer 1

为什么要替换那个div?不是更好地显示缩略图与基本信息+ onClick路线到主要文章?我强烈推荐使用NextJS，静态道具将帮助你很多，并将确保你有一个良好的结构，但与一个简单的CRA，你也可以做到这一点。显示带有简短描述的缩略图，并添加onClick，其中包含所有详细信息和传递的道具。