Question

我正在使用 React Native 功能组件将数据传递给基于类的组件，但我卡住了，因为我无法检索类中的数据通过将 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 钩子，因此无法在这个特定的类组件中使用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} />;
};

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

1 个答案: