如何从反应钩子中的自定义组件获取引用?

Question

我有这段代码，使用 React.useRef(( 但不起作用： 主.js：

import * as React from "react"
export const Main: React.FunctionComponent<Props> = observer((props) => {
const ref = React.useRef()
React.useEffect(() => {
///Can not get ref from message
ref.gotoPosition(5)
}, [])
return (
<View style={styles.container}>
<Message
ref={ref}
getGotoIndex={getFunction}
onEndList={isShowQuickMove}
isSpeaker={state.isSpeaker}
questionsList={state.questionsList}
clickQuestion={clickQuestion}
isTyping={chatStore.loading}
data={state.data}/>
</View>
)
}

留言.js：

import * as React from "react"
// eslint-disable-next-line react/display-name
export const Message = React.forwardRef((props, ref) => ({
const { ... } = props
const gotoPosition = (index) => {
console.log('in here')
}
return (
<View>
....
</View>
)
}
)

我无法从消息中获取引用，即使我使用了React.forwardRef。如何通过 ref 访问消息中的 gotoPosition 函数，例如 ref.gotoPosition(5(。谢谢

Answer 1

你没有传递你得到的 ref 到Flatlist你需要做的就是像这样传递它：

<FlatList
ref={ref} // create a referenece like so
extraData={[data, isSpeaker]}
onEndReached={handleEnd}
onEndReachedThreshold={0.4}
data={data}
keyExtractor={(item, index) => index.toString()}
renderItem={renderItems}
/>