首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Recompose中使用withHandlers将refs添加到功能组件,并在ScrollView上调用ScrollTo?

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

Stack Overflow用户
提问于 2017-08-15 00:01:13
回答 3查看 5.3K关注 0票数 13

我的具体目标是使用ScrollView的ScrollTo method,但保持功能组件结构。

更广泛地说,这需要获取isn't possible with naked react native当前组件的ref。

在2016年12月,recompose添加了Allows handlers property of withHandlers to be a factory function,但我不太清楚如何正确使用它。

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

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-08-18 11:42:11

您可以尝试如下所示:

代码语言:javascript
复制
/* ... */

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)
票数 21
EN

Stack Overflow用户

发布于 2018-10-10 21:21:48

就我个人而言,我更喜欢将Ref作为一个道具来启动

代码语言:javascript
复制
  withProps(() => ({
    ref: React.createRef(),
  })),

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

代码语言:javascript
复制
const MyComponent = ({ ref }) => <Foo ref={ref} />
票数 5
EN

Stack Overflow用户

发布于 2018-07-23 01:23:19

另一种方法是创建一个类作为ref存储:

代码语言:javascript
复制
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);
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45678526

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档