React Native 如何将数据从函数组件传递到类组件

Question

我正在使用 react native functional 组件将数据传递给 基于类的组件，但我被卡住了，因为我无法检索类中的数据通过将 route.params.data 存储在目标组件内的新变量中，就像在基于函数的组件中一样。我必须使用基于特定类的组件的原因是我正在使用基于类组件概念的 MultiSelect react native future。 我像这样从功能组件传递数据：

navigation.navigate('Order', { screen: 'Order', initial: false, params: {data : user_id},
                                                                })

我应该在目标组件中执行此操作以获取传递的数据：

const info = route.params.data

但是没有得到基于类的组件中的数据，因为基于类的组件不能使用路由。那么请问我怎样才能达到这个目的？我也在使用 Redux，它已经在所有函数组件中发送了所有数据，但由于类组件无法使用 Redux 钩子。 非常感谢所有帮助。 注意： 我面临的限制是只能在基于类的组件中使用 React Native MultiSelect，它既不能从功能性父组件获取传递的值，也不能从痛处检索 redux 数据。 提前致谢。

Answer 1

在multiselect.js

import React from "react";
import { View, SafeAreaView } from "react-native";
import MultiSelect from "react-native-multiple-select";

export default MultiSelectExample = (
  props /* getting the props from parent */
) => {
  // Create a selectedItems state, initialize it as empty array
  const [selectedItems, setSelectedItems] = React.useState([]);
  // Create a reference from the multiSelect
  const multiSelect = React.useRef(null);

  const onSelectedItemsChange = (items) => {
    setSelectedItems(items);
  };

  return (
    <SafeAreaView>
      <View>
        <MultiSelect
          hideTags
          items={props.items}
          uniqueKey="id"
          ref={(component) => {
            // assign the reference of the multiselect
            multiSelect.current = component;
          }}
          onSelectedItemsChange={onSelectedItemsChange}
          selectedItems={selectedItems}
          selectText="Pick Items"
          searchInputPlaceholderText="Search Items..."
          onChangeInput={(text) => console.log(text)}
          tagRemoveIconColor="#CCC"
          tagBorderColor="#CCC"
          tagTextColor="#CCC"
          selectedItemTextColor="#CCC"
          selectedItemIconColor="#CCC"
          itemTextColor="#000"
          displayKey="name"
          searchInputStyle={{ color: "#CCC" }}
          submitButtonColor="#CCC"
          submitButtonText="Submit"
        />
        {/* the '?' to check if a field in the object exists,
        at the first render of the screen the multiSelect.current is undefined
        so you need to check the existance of its properties or else it will throw
        an  error saying that undefined does not have function called getSelectedItemsExt*/}
        <View>{multiSelect.current?.getSelectedItemsExt?.(selectedItems)}</View>
      </View>
    </SafeAreaView>
  );
};

在 App.js 中

import React from "react";
import MultipleSelect from "./multiselect";

const items = [
  {
    id: "92iijs7yta",
    name: "Ondo",
  },
  {
    id: "a0s0a8ssbsd",
    name: "Ogun",
  },
  {
    id: "16hbajsabsd",
    name: "Calabar",
  },
  {
    id: "nahs75a5sg",
    name: "Lagos",
  },
  {
    id: "667atsas",
    name: "Maiduguri",
  },
  {
    id: "hsyasajs",
    name: "Anambra",
  },
  {
    id: "djsjudksjd",
    name: "Benue",
  },
  {
    id: "sdhyaysdj",
    name: "Kaduna",
  },
  {
    id: "suudydjsjd",
    name: "Abuja",
  },
];

export default App = () => {
  return <MultipleSelect items={items} />;
};