Question

我有三个组件标题，侧边栏，另一个是中心。中心获取数据（所有数据 - 帖子）。在每个帖子中都会有一个按钮来查看当前的完整帖子。现在，全职组件将取代所有后组件。我不想渲染所有其他组件。只想渲染完整帖子组件。现在我该怎么做呢。我的app.js包含三个主要组件

return 
{
    t1: task1,
    t2: task2    //error here
};

center.js组件

return {
    t1: task1,
    t2: task2    
};

现在所有帖子都在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> ) } }组件中。现在，组件render(){ return ( <Provider store = {this.store}> <div className="center-bar nine columns "> <div className="row"> <CenterHeader /> <PostContent /> <RightSide /> </div> </div> </Provider> )将在那里，当按钮被单击时，它将替换此postContent组件中的postdetail

Answer 1

您需要通过url参数呈现的每个帖子的路线。注意：用于呈现特定帖子的ID。当达到该帖子时，它也可以获取所需的数据。

  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中呈现其他组件

1 个答案: