React Native中如何从A类向B类获取数组数据？

Hey there! No need to apologize at all—we all start somewhere, right? 😊 Let’s break down how to get that array from Class A to Class B in React Native, depending on how your components are related:

1. If Class A is the parent of Class B (Parent-Child Relationship) #

This is the most straightforward scenario—just pass the array as a prop to Class B. Here’s how:

Class A (Parent Component)

import React, { Component } from 'react';
import { View } from 'react-native';
import ClassB from './ClassB';

class ClassA extends Component {
  constructor(props) {
    super(props);
    // Your array data could be in state (if it needs to update) or just a regular variable
    this.state = {
      myArray: ['Item 1', 'Item 2', 'Item 3']
    };
  }

  render() {
    return (
      <View>
        {/* Pass the array to Class B via props */}
        <ClassB passedArray={this.state.myArray} />
      </View>
    );
  }
}

export default ClassA;

Class B (Child Component)

Now just access the array from this.props:

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class ClassB extends Component {
  render() {
    // Extract the array from props
    const { passedArray } = this.props;

    return (
      <View>
        {/* Render each item in the array */}
        {passedArray.map((item, index) => (
          <Text key={index}>{item}</Text>
        ))}
      </View>
    );
  }
}

export default ClassB;

2. If Class A and Class B are Unrelated (No Parent-Child Link) #

For components that don’t share a direct parent-child relationship, you can use React Context (great for simple global state) or state management libraries like Redux (for more complex apps). Let’s go with Context since it’s easier for beginners:

Step 1: Create a Context File

First, make a new file to hold your shared context:

// DataContext.js
import React, { createContext, Component } from 'react';

// Create the context
export const DataContext = createContext();

// Create a Provider component to wrap your app
export class DataProvider extends Component {
  state = {
    sharedArray: [],
    // Add a method to update the array if you need dynamic changes
    updateArray: (newArray) => {
      this.setState({ sharedArray: newArray });
    }
  };

  render() {
    return (
      <DataContext.Provider value={this.state}>
        {this.props.children}
      </DataContext.Provider>
    );
  }
}

Step 2: Wrap Your App with the Provider

In your root component (like App.js), wrap everything with the DataProvider:

// App.js
import React from 'react';
import { DataProvider } from './DataContext';
import ClassA from './ClassA';
import ClassB from './ClassB';

export default function App() {
  return (
    <DataProvider>
      <ClassA />
      <ClassB />
    </DataProvider>
  );
}

Step 3: Set the Array in Class A

// Class A
import React, { Component } from 'react';
import { Button } from 'react-native';
import { DataContext } from './DataContext';

class ClassA extends Component {
  // Connect to the context
  static contextType = DataContext;

  componentDidMount() {
    // Initialize or fetch your array here
    const initialArray = ['Apple', 'Banana', 'Orange'];
    this.context.updateArray(initialArray);
  }

  render() {
    return (
      <Button 
        title="Update Array" 
        onPress={() => this.context.updateArray(['New Item 1', 'New Item 2'])} 
      />
    );
  }
}

export default ClassA;

Step 4: Access the Array in Class B

// Class B
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { DataContext } from './DataContext';

class ClassB extends Component {
  // Connect to the context
  static contextType = DataContext;

  render() {
    const { sharedArray } = this.context;

    return (
      <View>
        {sharedArray.map((item, index) => (
          <Text key={index}>{item}</Text>
        ))}
      </View>
    );
  }
}

export default ClassB;

3. If It’s Static Data (Never Changes) #

If your array doesn’t need to update dynamically, just put it in a separate utility file and import it into both classes:

// sharedData.js
export const staticArray = ['Static Item 1', 'Static Item 2', 'Static Item 3'];

Then use it in Class A and B:

// In Class A or Class B
import { staticArray } from './sharedData';

// Use staticArray directly wherever you need it!

If your components have a different relationship than what I covered, feel free to share more details about your code, and we can tweak this further. 😊

内容的提问来源于stack exchange，提问作者user7503333