如何在 Recompose 中使用 withHandlers 将引用添加到功能组件并在 ScrollView 上调用 ScrollTo?

2024-04-20

我的具体目标是使用滚动到方法 http://facebook.github.io/react-native/docs/scrollview.html#methodsScrollView 的但保持功能组件结构。

更一般地说,这需要获取对当前组件的引用裸露反应本机是不可能的 https://facebook.github.io/react/docs/refs-and-the-dom.html#refs-and-functional-components.

2016年12月重组 added 允许 withHandlers 的 handlers 属性成为工厂函数 https://github.com/acdlite/recompose/pull/295但我不太清楚如何正确使用它。

如何在 Recompose 中使用 withHandlers 将引用添加到功能组件并在 ScrollView 上调用 ScrollTo?


你可以尝试这样的事情:

/* ... */

const MyView = ({ onRef, children }) => (
    <View>
        <ScrollView ref={onRef} /* ... */>
            {children}
        </ScrollView>
    </View>
)

export default compose(
    withHandlers(() => {
        let myScroll = null;

        return {
            onRef: () => (ref) => (myScroll = ref),
            scrollTo: () => (value) => myScroll.scrollTo(value)
        }
    },
    lifecycle({
        componentDidMount() {
            this.props.scrollTo({ x: 0, y: 100, animated: true })
        }
    })
)(MyView)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Recompose 中使用 withHandlers 将引用添加到功能组件并在 ScrollView 上调用 ScrollTo? 的相关文章

随机推荐