如何在 React Native 中动态创建多个 Refs

Posted 2023-02-25

【中文标题】如何在 React Native 中动态创建多个 Refs

【英文标题】：How to create multiple Refs dynamically in React Native

【发布时间】：2021-05-09 15:35:28

【问题描述】：

我的 React Native 应用程序中有多个 Swipeable 组件，它们是由用户动态创建的，为了让 Swipeable 自行关闭，我设置了对它的引用，并在其上调用了一个关闭函数，但是，这仅适用于最后创建的 Swipeable，而不适用于所有这些，我怎样才能使 ref 适用于所有这些？

这是我的代码：

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()
  

【问题讨论】：

您需要分享更多代码。您如何存储 Swipeables，id 是什么？当你插入新的 Swipeable 时，你也可以创建一个 ref 并以同样的方式存储它

@Sohaib 感谢您的评论，我已经编辑了代码，如您所见，我正在映射一组消息，并且每个消息都返回一个 Swipeable，它具有来自 firebase 的自己的 id。

仍然不清楚你如何称呼setMessages

【参考方案1】：

您可以这样做。使用 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 />
    )
)

【讨论】：

但是索引从何而来？我必须分配它吗？

索引来自map函数。你不必分配它