ReactJS中的高阶组件-扩展数据组件的功能

我为这个愚蠢的问题感到抱歉，我正在学习反应，所以我根本不是专家

我想知道是否有一种方法可以通过一些功能扩展我的无状态组件，而不用在它们周围创建始终包装器，它们将连接到Redux存储并通过道具传递数据

高阶分量是最好的方法吗

让我用几行代码更好地解释一下。 下面的示例组件应在用户单击事件上调用API/Favorites（POST）以创建“Favorite”实体，并将调用相同的API（DELETE）以将其删除

这是我已经意识到的解决方案：

const HOC_DISPLAY_NAME = 'HOCFavouriteIcon';
export default function HOCWrapperFavourite(FavouriteComponent) {

return class extends React.Component {

    static displayName = HOC_DISPLAY_NAME;

    constructor(props) {
        super(props);
        this.state = this.getDefaultState();
        this.bindMethods();
    }

    getDefaultState() {
        return {
            isFavourite: false,
            addFavouritePayload: null,
            removeFavouritePayload: null,
        };
    }

    render() {
        return (
            <DataProviderApiFavourites
                create={this.state.addFavouritePayload}
                createListener={this.favoriteCreateHandler}
                delete={this.state.removeFavouritePayload}
                deleteListener={this.favoriteDeleteHandler}
            >
                <FavouriteComponent
                    {...this.props}
                    {...this.state}
                    addFavourite={this.addFavouriteClickHandler}
                    removeFavourite={this.removeFavouriteClickHandler}
                />
            </DataProviderApiFavourites>

        );
    }

    addFavouriteClickHandler(visitorId, artId) {
            this.setState({
                addFavouritePayload: {visitorId, artId},
            });
    }

    removeFavouriteClickHandler(visitorId, favouriteId) {
            this.setState({
                removeFavouritePayload: {visitorId, favouriteId},
            });
    }

    favoriteCreateHandler(result){
        // do something when a favorite entity was created
    }

    favoriteDeleteHandler(result){
        // do something when a favorite entity was deleted
    }

    bindMethods() {
        this.addFavouriteClickHandler = this.addFavouriteClickHandler.bind(this);
        this.removeFavouriteClickHandler = this.removeFavouriteClickHandler.bind(this);
        this.favoriteCreateHandler = this.favoriteCreateHandler.bind(this);
        this.favoriteDeleteHandler = this.favoriteDeleteHandler.bind(this);
    }

}

const HOC_DISPLAY_NAME='HOCFavouriteIcon'；
导出默认函数HOCWrapperFavourite（FavoriteComponent）{
返回类扩展了React.Component{
静态显示名称=临时显示名称；
建造师（道具）{
超级（道具）；
this.state=this.getDefaultState（）；
这个.bindMethods（）；
}
getDefaultState（）{
返回{
我最喜欢的是：错，
addFavoritePayload:null，
RemoveFavoritePayload:null，
};
}
render（）{
返回(
);
}
AddFavoriteClickHandler（visitorId，artId）{
这是我的国家({
addFavoritePayload:{visitorId，artId}，
});
}
移除FavoriteClickHandler（visitorId，FavoriteId）{
这是我的国家({
RemoveFavoritePayload:{visitorId，FavoriteId}，
});
}
favoriteCreateHandler（结果）{
//创建收藏夹实体时执行某些操作
}
favoriteDeleteHandler（结果）{
//删除收藏夹实体时执行某些操作
}
bindMethods（）{
this.addFavoriteClickhandler=this.addFavoriteClickhandler.bind（this）；
this.removeFavoriteClickhandler=this.removeFavoriteClickhandler.bind（this）；
this.favoriteCreateHandler=this.favoriteCreateHandler.bind（this）；
this.favoriteDeleteHandler=this.favoriteDeleteHandler.bind（this）；
}
}

})

DataProviderApiFavorites有一个属性“create”，该属性接受JSON负载，它将触发Saga捕获的Redux操作（Saga将调用API），并且它还能够通过createListener函数通知结果。 它对delete prop执行相同的操作（但它将调用delete API并通过favoriteDeleteHandler进行通知）

考虑到FavoriteComponent是一个无状态组件，为了在UI组件中使用数据组件的功能，它是一个好的结构吗

实际上，可以在不嵌套子组件的情况下使用DataProviderApiFavorites，如果设置了，它将返回null或this.props.children

---

如果有人能帮助我理解我是否会做错事，我将不胜感激。

当然，HOC将非常适合这个用例

代码很好，但是，为了坚持组合和可重用性的思想，我会构建一个更通用的HOC，并且不在其中添加太多逻辑，然后如果需要更具体的东西，传递参数或在其上构建另一个HOC

例：

将存储作为参数传递给HOC，然后如果需要它的特定部分，则将其指定为第一个参数或使用另一个HOC抽象

简言之，与其使用直接接受包装组件的HOC，不如创建另一个接受第一个参数的HOC，这将为您提供更大的灵活性。第一个参数可能是redux存储、解构redux存储、默认状态等，具体取决于您选择使用的逻辑

• 或者，也可以为你想要的工作
• 同样，您也可以为redux的connect创建一个HOC，看看

谢谢您的回答！：）这是一篇很老的帖子，我现在使用的是重新选择，它简化了很多：）无论如何，非常感谢！

const HOC = store => WrappedComponent => props => (
    // Render your wrapped component, spread the store to his props
);