如何在Recompose中使用withHandlers向函数组件添加refs并在ScrollView上调用ScrollTo？ [英] How do you add refs to functional components using withHandlers in Recompose and call ScrollTo on a ScrollView?

问题描述

我的具体目标是使用 ScrollTo方法一个ScrollView但保持功能组件结构。

My specific goal is to use the ScrollTo method of a ScrollView but maintain functional component structure.

更一般地说，这需要获取当前组件无法以裸体反应本机。

More generally this requires getting ref to the current component which isn't possible with naked react native.

2016年12月重新构建添加了允许withHandlers的处理程序属性是一个工厂函数但我无法弄清楚如何正确使用它。

In Dec 2016 recompose added Allows handlers property of withHandlers to be a factory function but I can't quite figure out how to use it correctly.

如何在重构和使用withHandlers时将refs添加到功能组件中在ScrollView上调用ScrollTo？

How do you add refs to functional components using withHandlers in Recompose and call ScrollTo on a ScrollView?

推荐答案

你可以尝试这样的事情：

You can try something like this:

/* ... */

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)

这篇关于如何在Recompose中使用withHandlers向函数组件添加refs并在ScrollView上调用ScrollTo？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！