如何在React Native中动态创建多个Ref
如何在React Native中动态创建多个Ref
提问于 2021-05-09 23:35:28
我的React Native应用程序中有多个Swipeable组件，它们是由用户动态创建的，为了让Swipeable自动关闭，我设置了一个引用，并在它上面调用了一个close函数，然而，这只适用于最后创建的Swipeable，而不是所有的，我如何才能使ref应用于所有的Swipeable？
下面是我的代码：
const [messages, setMessages] = useState([])
const Swipeablee = useRef();
return(
{messages.map(({id, data}) => (
<Swipeable key={id} renderLeftActions={leftActions}
onSwipeableLeftOpen={() => swipeAction(data)}
overshootLeft={false}
ref={Swipeablee}
overshootFriction={8} >
)}
)
下面是我要调用的函数：
const swipeAction = (data) => {
Swipeablee.current.close()
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-11 12:28:05
下面是你如何做到这一点。使用useRef创建一个数组，并在Swipeable组件呈现后将ref存储在其中。
const [messages, setMessages] = useState([]);
const refs = useRef([]); // using useRef because we want to persist the values when component re-renders
const swipeAction = (data, swipeable) => {
// process data
swipeable.close()
}
return(
{messages.map(({id, data}, index) => (
<Swipeable key={id} renderLeftActions={leftActions}
onSwipeableLeftOpen={() => swipeAction(data, refs.current[index])}
overshootLeft={false}
// Store the Swipeable to our array, ref prop will give us the component once it is rendered
ref={swipeable => refs.current[index] = swipeable}
overshootFriction={8} />
)}
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67459486
复制相关文章
相似问题