反应路由器从rest api导航链接

Question

我是新手，在尝试浏览我的 api 页面时遇到了问题。我做了什么：http://pastebin.com/hxf9PJ8k 它在我看来完美无缺，但只显示第一个 api 页面。所有用户配置文件的链接也有效，只需将 id 添加到 api 链接即可。因此，我的 api 返回给我的对象实际上是用户，以及数据库中用户的总数以及指向下一页的链接（如果存在或为空，则为上一页或为空）。现在我无法理解如何使用这些链接来创建 2 个按钮——下一个和上一个。如何将整个链接或仅在 page= 旁边的部分传递给用户道具并提出 xhr 请求。 Api 示例视图： count: 2302 next: "http://localhost:8080/instant/api/?page=2" previous:
results:
0: Object 1: Object 2: Object 提前致谢！

Answer 1

基本上建议你做的是创建一个 currentPage 变量，这使你的逻辑非常简单。

为上一个和下一个按钮创建一个单独的组件来处理分页条件，处理父组件上的任何点击事件以保持简单。

class PrevBtn extends React.Component {
    constructor(props){
        super(props);
        this.props.clickHandler = this.props.clickHandler.bind(this);
    }

    render() {
        let button = null;
        const {currentPage} = this.props;

        if(currentPage>1){
          button = <a onClick={this.props.clickHandler}>Prev</a>
        }else{
          button = <a disabled="disabled">Prev</a>
        }
        return(<div>{button}</div>)
      }
    }

我只是在codePen给你做了一个例子，但是我只是做了prev按钮逻辑，你可以弄清楚如何做next按钮组件。