如何在反應中設置子組件的狀態？

Question

在名為Grid.js的React組件中，我使用的是名為Pagination的子組件。 看起來像這樣：

 <StyledBox wrap py={12} px={18}>
    <Header />
     {state.data}
    <Wrapper column justify="center" align="center" p={12}>
      <Pagination onChange={this.handleChange} totalPages={10} />
    </Wrapper>
  </StyledBox>

它是具有某些分頁功能的網格。 當用戶在分頁中選擇頁面時，將觸發changeevent並將設置Grid的stateprop，稱為state.data。 問題是分頁開始隨機跳動：看起來組件的狀態已經改變。

我是否必須將分頁移出Grid組件並使其不成為子組件？

Answer 1

分頁組件是否由於先前存在特定長度的數據而隨機跳動？ 那么當this.state.data更改時，數據長度是否不同？ 因此，分頁必須調整其位置。 沒有更多信息，這似乎是HTML和CSS問題。

嘗試設定position: fixed; bottom: 1rem position: fixed; bottom: 1rem分頁組件css上的position: fixed; bottom: 1rem ，看看它是否仍然跳。

另外，對於React組件， <Content /> and <Pagination /> components seem to be conceptually sibling and not parent-child related 。 所以我將構建這樣的應用程序：

<ParentContainer>
  <Header />
  <Content data={this.state.data} />
  <Pagination onChange={this.handleChange} totalPages={10} />
</ParentContainer>