[英]how to change a component without rendering the other component in reactjs and react-router-dom
i have three component Header,Sidebar,and another one is the center . 我有三个部分Header,Sidebar和另一个是center。 the center fetch data(all datas-post).
中心获取数据(所有数据后)。 In each post there will be a button to see present full post .
在每个帖子中,都有一个按钮可以查看当前的完整帖子。 now the full-post component will be replacing the all post-component.
现在,整个职位组成部分将替换所有职位组成部分。 I dont want to render all other component.
我不想渲染所有其他组件。 Just want to render the full-post component.Now How can I do this.
只想渲染完整的文章组件。现在我该怎么做。 My app.js containing the three main component
我的app.js包含三个主要组件
export default class App extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<ApolloProvider client = {client} >
<div >
<div className="row">
<SideBar store={store} />
<Center store={store} />
<RightSlidePanel store={store}/>
</div>
</div>
</ApolloProvider>
)
}
}
center.js component center.js组件
render(){
return (
<Provider store = {this.store}>
<div className="center-bar nine columns ">
<div className="row">
<CenterHeader />
<PostContent />
<RightSide />
</div>
</div>
</Provider>
)
now all the post are in postContent
component . 现在所有帖子都在
postContent
组件中。 Now A component postdetail
will be there which when a button will be click it will replace the postContent
in this center
component 现在,组件的后
postdetail
将在那里,当单击按钮时它将替换此center
组件中的postContent
。
You would need a route for each post that is rendered via url parameters. 您需要为每个通过url参数呈现的帖子指定一条路线。 Notice :id for rendering a specific post.
注意:id用于呈现特定的帖子。 When that post is reached it can fetch its needed data as well.
到达该职位后,它也可以获取其所需的数据。
render () {
return (
<Switch>
<Route
exact
path={'/posts'}
render={() => {
return (
<BlogSummaryList
posts={this.state.blogPosts}
/>
)
}}
/>
<Route
exact
path={'/posts/:id'}
component={BlogPost}
/>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.