如何在react中显示分页表

Question

我想在页面上的React中呈现一个表。表包含很多行，所以我想应用分页。就像有人单击第2页链接（/open\u alerts/？page=2）时一样，table会在保持同一页的同时获取下一行，而只是更改数据。但我面临的问题是，我无法知道AlertsTable组件中页面参数的值。我看到了一些useParams钩子，但这在类组件中是不允许的。我怎样才能实现我想要的东西？

主页位于/并且包含指向/打开\警报/页面的链接。App.js：

    <Router>
    <Switch>
      <Route exact path="/">
        <Link to="/open_alerts/">Open Alerts</Link>
        <div className="Charts">
          <AlertsChart id="alerts-chart"/>
          <RegionsChart id="regions-chart"/>
        </div>
      </Route>
      <Route path="/open_alerts/"> 
        <Link to="/">Home page</Link>       
        <AlertsTable />
      </Route>
    </Switch>
    </Router>

如何在AlertsTable组件中知道页码，以便在对服务器的API调用中使用页码来获取分页响应？

alerts_table.js：

    export class AlertsTable extends React.Component {
    .
    . // code here
    .
    render() {
        return (
          <div>
            <h1>
              Open alerts
            </h1>
            { !this.state.isfetched ? <p>Fetching open alerts</p>: 
            <div>
              <AlertsRenderer alerts={this.state.alerts}/>
              <PaginatedButton pages={this.state.pages_count} />
            </div> }
          </div>
        );
      }
    }

paginated_button.js：

    export function PaginatedButton(props) {
      return (
        <Router>
        {props.pages.map(page_no => (
          <button>
            <Link exact to={"/open_alerts/?page="+(parseInt(page_no)+1)}>{page_no+1}</Link>
          </button>
        ))}
        </Router>
    )}

AlertsRenderer只是一个功能组件，它使用HTML表格标记从道具和显示器获取警报。

Answer 1

useParams对您没有任何帮助，因为这是路由的matchparams，与URL的查询字符串参数无关。

您必须处理查询字符串，该字符串可以从位置路由属性访问。

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

使用URLSearchParams处理查询字符串。

const search = this.props.location.search;
const queryParams = Object.fromEntries(new URLSearchParams(search));

const search = "?page=2";
const queryParams = Object.fromEntries(new URLSearchParams(search));

console.log(queryParams);