Question

在我的React组件Grid.js中，我正在使用一个名为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问题。

尝试在分页组件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>

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

1 个答案: