如何将道具保存在室内列表中的儿童组件中

Question

我当前使用具有自定义组件的React-Native Flatlist显示数据。自定义组件显示一张卡A时应在单击时显示模式(请确切地说是RBSheet(。

问题在于，道具看起来并不保留，当我按卡上时，我会从另一张卡中获取道具数据。

我考虑要在父母身上获取单击元素，但是我无法通过flatlist进行使用以显示正确的数据。

我无法绑定卡以从其道具中获取数据。

我的自定义组件(entry.js(

return (
    <View
      style={{
        flexDirection: "row",
        alignContent: "center",
        alignItems: "center",
        textAlign: "center",
        marginBottom: "5%"
      }}
    >
      <View style={{ flexDirection: "row" }}>
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            justifyContent: "center",
            alignContent: "center",
            alignItems: "center",
            textAlign: "justify"
          }}
        >
          <Card
            style={{
              padding: 10,
              elevation: 2,
              margin: 10,
              textAlign: "center",
              width: "95%",
              borderRadius: 20
            }}
            onPress={() => this.RBSheet.open()}
          >
            <Card.Content>
              <Image
                source={{
                  uri:
                    "http://guiadigital.madridactiva.anovagroup.es/" +
                    props.item.fotos[0]
                }}
                style={{
                  width: "100%",
                  height: 200,
                  padding: 5,
                  borderRadius: 10
                }}
                PlaceholderContent={<ActivityIndicator />}
              />
              <Text
                style={{
                  color: "#484855",
                  fontSize: RF(3.5),
                  paddingTop: 25,
                  textAlign: "center"
                }}
              >
                {props.item.nombre}
              </Text>
              <Text
                style={{
                  color: "#484855",
                  fontSize: RF(2),
                  paddingTop: 15,
                  textAlign: "center"
                }}
              >
                {props.item.descripcion.split(".")[0]}
              </Text>
            </Card.Content>
          </Card>
        </View>
      </View>
      <RBSheet
        ref={ref => {
          this.RBSheet = ref;
        }}
        animationType="slide"
        closeOnPressMask={true}
        height={RF(80)}
        duration={100}
        customStyles={{
          container: {
            justifyContent: "center",
            alignItems: "center",
            textAlign: "center",
            alignContent: "center",
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20
          }
        }}
      >
        <Text
          style={{
            color: "#484855",
            fontSize: RF(3.5),
            paddingTop: 25,
            textAlign: "center"
          }}
        >
          {props.item.nombre}
        </Text>
      </RBSheet>
    </View>
  );

我的flatlist(以防万一(

<View
            style={{
              flex: 1,
              justifyContent: "center",
              textAlign: "center",
              alignItems: "center",
              marginTop: "5%"
            }}
          >
            <FlatList
              style={{
                width: "100%",
                alignContent: "center",
                backgroundColor: "#000"
              }}
              data={this.state.data}
              showsVerticalScrollIndicator={true}
              keyExtractor={item => item.nombre}
              renderItem={({ item }) => <Entry item={item} />}
            />
          </View>

我希望能够在我的自定义组件或flatlist屏幕中处理数据

Answer 1

使用shouldComponentUpdate，我认为您应该能够控制子组件内的数据。有关更多信息，请参见React文档https://it.reactjs.org/docs/react-component.html#shouldcomponentupdate

Answer 2

我已经解决了我的问题，问题是该组件没有将其声明为类，因此不能正确保留道具。

一旦将组件声明并导出为类，flatlist中的每个项目都是具有自己的道具的对象。