在 React Native 的 FlatList 中使用 ref

Question

我仍然无法理解 React Native（以及一般的 React）中的引用。我正在使用功能组件。我有一个包含很多项目的 FlatList。如何为项目中的某个事物（如文本或视图组件）创建引用？

<FlatList
 data={data}
 renderItem={({ item }} => {
   <View>

    ... lots of other stuff here

    <TouchableOpacity onPress={() => _editITem(item.id)}>
      <Text ref={(a) => 'text' + item.id = a}>EDIT</Text>
    </TouchableOpacity>

  </View>
 }
/>

然后在 _editItem 中，我想引用 Text 组件，以便我可以将其文本从 'EDIT' 更改为 'EDITING'，甚至更改其样式等等。

_editPost = id => {
  console.log(text + id)
}

我试过了...

FeedComponent = () => {
  let editPosts = {}

 <FlatList
 data={data}
 renderItem={({ item }} => {
   <View>

    ... lots of other stuff here

    <TouchableOpacity onPress={() => _editITem(item.id)}>
      <Text ref={(a) => editPosts[item.id] = a}>EDIT</Text>
    </TouchableOpacity>

  </View>
 }
/>

...还有其他一些事情，但我想我可能离题太远了，所以我可以使用一些指导。

Answer 1

通常情况下，您不会在响应中使用引用来更新文本等内容。内容应根据组件的当前道具和状态呈现。

在您描述的情况下，您可能希望在父组件中设置一些状态，然后影响项目的呈现。

作为旁注，如果您需要在子组件上触发方法，例如在 TextInput 上调用 focus，而不是强制更新组件内容，则使用 refs。

在您的情况下，您需要更新一些代表当前活动项目的状态。类似于：

import React, {useState} from 'react';
FeedComponent = () => {
  const [activeItem, setActiveItem] = useState(null);

 <FlatList
 data={data}
 renderItem={({ item }} => {
   return (
   <View>

    ... lots of other stuff here

    <TouchableOpacity onPress={() => setActiveItem(item.id)}>
      {activeItem === item.id
          ? <Text>EDITING</Text>
          : <Text>EDIT</Text>
      }
    </TouchableOpacity>

  </View>
 );
 }
 extraData={activeItem}
/>

在 React Native 的 FlatList 中使用 ref

Using a ref in a FlatList in React Native

javascript

ref

react-native

react-native-flatlist