如何在反应中设置子组件的状态？

Question

In my React component called Grid.js I am using a childcomponent called Pagination. It looks like this:

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

It is a grid with some pagination functionality. When the user selects a page on the Pagination a changeevent will fire and a stateprop of the Grid will be set called state.data. The issue is that the pagination starts jumping around randomly: looks like the state has changed on the component.

Do I have to move the Pagination out of the Grid component and make it not a childcomponent?

Answer 1

Is the Pagination Component jumping around randomly because previously there was a specific length of data. Then when the this.state.data changes, the length of data is different? So then, the Pagination had to adjust it's positioning. Without more information, it seems like a HTML and CSS issue.

Try to set position: fixed; bottom: 1rem position: fixed; bottom: 1rem on the Pagination component css and see if it still jumps.

Also, regarding React Components, <Content /> and <Pagination /> components seem to be conceptually sibling and not parent-child related . So I would structure the app something like this:

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