Question

我有两个组成部分-<Parent/>和<Book />

<Book />是我编写的（希望）可重用的组件，用于管理其自身的状态。

class Book extends React.component {
    constructort(props) {
        ...
        this.state = {page: 1}
    }
    nextPage() {
        this.setState({page: this.state.page + 1})
    }
    prevPage() {
        this.setState({page: this.state.page - 1})
    }
    render() {...}
}

<Book />组件根据其状态下的page属性显示正确的页面。如您所见，有两种方法可以处理此状态-假设有人分别单击next page和previous page按钮时将调用这些方法

但是，我不希望<book />组件来管理“下一步”和“上一步”按钮。我想为最终使用该组件的开发人员提供一种调用nextPage()和prevPage()方法的方法。当用户按下按钮或向右滑动时，就会发生这种情况。

操纵儿童状态的惯用方式是将其作为道具从父母那里传下来。在这种情况下，我无法执行此操作，因为我不希望父级管理状态-我只是希望它能够在子级上调用某些方法，这些方法又会改变子级的状态。

换句话说，下一位开发人员不想考虑这本书应该呈现在什么页面上。她只是想让这本书知道必须翻页。如何在ReactJS中实现这种抽象？

编辑：如果使情况更清晰，请假定目标是将<Book />作为npm中的可重用库发布。

编辑：是否有一种无需使用引用即可做到的方法？

ReactJS-如何将您的组件暴露给外部事件？

0 个答案: