我们可以在 React 中将一个 HOC 包裹在另一个 HOC 周围吗

Question

我是新手，我有一个 redux 存储，它通过 connect HOC 连接到一个组件。但是，我想将连接包裹在从另一个 3rd 方库导入的另一个 HOC 周围。

可能是这样的：AnotherHOC(connect(mSTP, null)(MyComponent))

那么基本上，如何为我们的组件使用 2 个 HOC？

编辑：有问题的组件：

    interface PassedProps extends React.Props<any> {
    onImageClick: any,
    paramName: any,
}

const ImageNavBar = ({ onImageClick, paramName, scrollPosition, expData, sortModel }: any) => {
    // images (in props)

    const theme = useTheme()

    const classes = useStyles()

    let sortedImages = expData.sort((a: any, b: any) => {
        if (sortModel.length > 0) {
            if (sortModel[0].sort === "desc") {
                return (
                    (a[sortModel[0].field] > b[sortModel[0].field]) ? -1 : ((a[sortModel[0].field] < b[sortModel[0].field]) ? 1 : 0)
                );
            }
            else if (sortModel[0].sort === "asc") {
                return (
                    (a[sortModel[0].field] < b[sortModel[0].field]) ? -1 : ((a[sortModel[0].field] > b[sortModel[0].field]) ? 1 : 0)
                );
            }
        }
    })

    return (
        <Paper tabIndex={1} className={classes.imgListContainerHorizontal}>
            {sortedImages.map((image: any, i: number) => {
                const disagr = image.disagreement
                return (
                    <LazyLoadImage 
                        key={i}
                        className={classes.img}
                        style={
                            image.name === paramName ? 
                            { border: "solid 3px black", padding: "3px" } : 
                            { borderBottom: disagr >= 0.7 ? "8px solid #CC0000" : (disagr >= 0.4 ? `8px solid ${theme.palette.warning.main}` : `8px solid ${theme.palette.success.main}`) }
                        }
                        onClick={() => { onImageClick(image.name) }}
                        scrollPosition={scrollPosition}
                        src={image.image_url}
                        alt=""
                        height="80px"
                        width="140px"
                    />
                )
            })}
        </Paper>
    )
};

const mapStateToProps = (state: any) => {
    return {
      expData: state.explorationData,
      sortModel: state.sortedArray
    }
}

export default compose(connect<{}, null, PassedProps>(mapStateToProps,null), trackWindowScroll)(ImageNavBar);

Answer 1

连接

 export default compose(
      withSomeProp,
      connect(
        mapProps,
        mapDispatch
      ),
    ) 

Redux

  import { compose } from 'redux'

export default compose(
  withResource,
  withSocket,
  withNotifications
)(TextComponent)

重构

import { compose } from 'recompose'

export default compose(
  withResource,
  withSocket,
  withNotifications
)(TextComponent)