如何在不渲染 reactjs 和 react-router-dom 中的其他组件的情况下更改组件

Question

我有三个组件 Header，Sidebar，另一个是 center 。中心获取数据（所有数据-post）。在每个 post 中都会有一个按钮来查看当前完整的 post 。现在 full-post 组件将替换 all post-component。我不想渲染所有其他组件。只想渲染完整的-post component.Now 我该怎么做。我的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分量

  render(){

    return (
      <Provider store = {this.store}>
        <div className="center-bar nine columns ">
          <div className="row">
              <CenterHeader />
              <PostContent />
              <RightSide />
          </div>
        </div>
      </Provider>
    )

现在所有 post 都在 postContent 组件中。现在组件 postdetail 将在那里，当单击按钮时它将替换此 center 组件

中的 postContent

Answer 1

您需要为通过 url 参数呈现的每个 post 路由。注意 :id 用于呈现特定的 post。当达到 post 时，它也可以获取所需的数据。

  render () {
    return (
      <Switch>
        <Route
          exact
          path={'/posts'}
          render={() => {
            return (
              <BlogSummaryList
                posts={this.state.blogPosts}
              />
            )
          }}
        />
        <Route
          exact
          path={'/posts/:id'}
          component={BlogPost}
        />
    )
  }

如何在不渲染 reactjs 和 react-router-dom 中的其他组件的情况下更改组件

how to change a component without rendering the other component in reactjs and react-router-dom

javascript

user-interface

user-experience

reactjs

react-router-dom