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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (318)

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

如何在Recompose中使用withHandlers向函数组件添加refs并在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)
用户回答回答于

另一种方法是将类作为Ref存储:

const Stateless = ({ refs }) => (
  <div>
    <Foo ref={r => refs.store('myFoo', r)} />
    <div onClick={() => refs.myFoo.doSomeStuff()}>
      doSomeStuff
    </div>
  </div>
)

class RefsStore {
  store(name, value) {
    this[name] = value;
  }
}

const enhancer = compose(
  withProps({ refs: new RefsStore() }),
)(Stateless);

所属标签

可能回答问题的人

  • 天使的炫翼

    16 粉丝531 提问35 回答
  • 富有想象力的人

    2 粉丝0 提问26 回答
  • 旺仔小小鹿

    社区 · 运营 (已认证)

    48 粉丝0 提问26 回答
  • 发条丶魔灵1

    6 粉丝525 提问25 回答

扫码关注云+社区

领取腾讯云代金券