创建全局数组以从所有组件访问

Question

我是 reactjs 的新手。 我有一个对象数组，我希望这个数组是全局的并且可以从多个组件访问。 我该如何处理？ 我是否创建另一个类然后导入它？

仅供参考 Angular 我会创建一个包含这个数组的服务来访问所有组件。

carts = [
        {
            title: 'Travel',
            backgroundColor: '#796157',
            description: 'Keep your eyes fresh & travel to other countries.',
            image: hs1,
            gallery: [
                '/assets/images/capture_1_travel/4.jpg',
                '/assets/images/capture_1_travel/2.jpg',
                '/assets/images/capture_1_travel/3.PNG'
            ]
        },
        {
            title: 'Record',
            backgroundColor: '#8693A2',
            description: 'Record the most important moments.',
            image: hs2,
            gallery: [
                '/assets/images/capture_3_record/2.jpg',
                '/assets/images/capture_3_record/5.jpg',
                '/assets/images/capture_3_record/3.jpg',
                '/assets/images/capture_3_record/4.jpg',
                '/assets/images/capture_3_record/6.jpg'
            ]
        },
        ...

Answer 1

您应该能够将其放入名为data.js的文件中，并将数组更改为export const carts = [...] 。 然后你可以使用import { carts } from './data.json';将它导入到任何 js react 文件中import { carts } from './data.json';

Answer 2

1. 上下文https://reactjs.org/docs/context.html
2. Redux 库
3. 使用“状态”并将数组推送到带有“道具”的子组件。

Answer 3

虽然我不建议使用它，但您可以将carts附加到window对象，例如：

window.carts=[...]