时间戳

首页 > 解决方案 > 如何在反应中设置子组件的状态？

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

问题描述

在我的名为 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>

它是一个具有一些分页功能的网格。当用户在 Pagination 上选择一个页面时，将触发一个 changeevent，并设置一个名为 state.data 的 Grid 的 stateprop。问题是分页开始随机跳动：看起来组件上的状态已经改变。

我是否必须将分页移出 Grid 组件并使其不是子组件？

标签： javascriptreactjs

解决方案

分页组件是否随机跳动，因为之前有特定长度的数据。那么当this.state.data变化时，数据的长度是不同的呢？因此，Pagination 不得不调整它的定位。如果没有更多信息，这似乎是 HTML 和 CSS 问题。

尝试position: fixed; bottom: 1rem在 Pagination 组件 css 上进行设置，看看它是否仍然跳转。

此外，关于 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>

推荐阅读