如何在Recompose中使用withHandlers向函数组件添加refs并在ScrollView上调用ScrollTo？

Question

我的具体目标是使用ScrollView 的ScrollTo方法,但维护功能组件结构.

更一般地,这需要获得当前组件的参考,这是裸体反应原生的.

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

如何在Recompose中使用withHandlers向函数组件添加refs并在ScrollView上调用ScrollTo？

Answer 1

你可以尝试这样的事情:

/* ... */

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)

Answer 2

我个人比较喜欢以Ref作为道具

  withProps(() => ({
    ref: React.createRef(),
  })),

然后将其传递给您的无状态组件

const MyComponent = ({ ref }) => <Foo ref={ref} />