我的具体目标是使用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?
发布于 2017-08-18 11:42:11
您可以尝试如下所示:
/* ... */
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)
发布于 2018-10-10 21:21:48
就我个人而言,我更喜欢将Ref作为一个道具来启动
withProps(() => ({
ref: React.createRef(),
})),
然后将其传递给无状态组件
const MyComponent = ({ ref }) => <Foo ref={ref} />
发布于 2018-07-23 01:23:19
另一种方法是创建一个类作为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);
https://stackoverflow.com/questions/45678526
复制相似问题