Question

我是新手，在尝试完成浏览我的api页面时遇到了问题。我做了什么：http://pastebin.com/hxf9PJ8k 它完全符合我的观点，但只显示第一页api页面。所有用户配置文件的链接也可以工作，只需向api链接添加一个id即可。所以，我的api返回给了我实际上是用户的对象，数据库中的用户总数和下一页的链接（如果存在）或null和上一页或null。现在我无法理解如何使用这些链接创建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为您做了一个示例，但我刚刚执行了上一个按钮逻辑，您可以弄清楚如何执行 next 按钮组件。

反应路由器导航来自rest api的链接

1 个答案: