React中如何将数组从一个子组件传递到另一个子组件？

你当前的代码里，arr是CardBox的局部变量，导致App和Header都无法获取到这个数组。要让多个组件共享同一数据，需要把数据移到它们的共同父组件（App）中，再通过props传递给子组件。

修改后的代码如下：

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

// Header组件接收arr作为props并展示
const Header = ({ arr }) => {
  return (
    <View>
      <Text>Header</Text>
      <Text>arr in Header: {arr.join(', ')}</Text>
    </View>
  );
};

// CardBox不再自己定义arr，而是通过props接收
const CardBox = ({ arr }) => {
  return (
    <View>
      <Text>CardBox</Text>
      <Text>arr in CardBox: {arr.join(', ')}</Text>
    </View>
  );
};

// 在App组件中定义arr，作为数据源传递给子组件
const App = () => {
  const arr = ["A", "B", "C"];
  return (
    <View>
      <Text>arr in App: {arr.join(', ')}</Text>
      <View>
        <Header arr={arr} />
      </View>
      <View>
        <CardBox arr={arr} />
      </View>
    </View>
  );
};

export default App;

关键修改点： #

• 把arr的定义移到App组件中，作为所有子组件的统一数据源
• 给Header组件添加props参数，用来接收并展示arr
• 修改CardBox组件，通过props接收arr，不再定义局部变量
• 使用join(', ')把数组转成字符串，避免直接渲染数组出现的格式问题

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