Question

以下组件显示一些静态数据。

存储组件本地静态数据的惯用方式是什么？

将数据存储在称为数据的模块范围变量中是否还可以？

还是应该做其他事情，例如创建要导入的./data.json文件？

import * as React from 'react';
import SectionContainer, { 
    InnerSectionContainer, 
    FlexContainer, 
    FlexItem 
} from '../../ui/SectionContainer';
import ScaledImage from '../../ui/ScaledImage';
import { SectionHeading } from '../../ui/Headings';

const data = {
    title: 'Trusted by',
    imageSrcs: [
        require('../../../images/logo1.png'),
        require('../../../images/logo2.png'),
        require('../../../images/logo3.png')
    ]
};

const Logos = () => {

    const logoItems = data.imageSrcs.map((imageSrc, index) => {
        return (
            <FlexItem key={index}>
                <ScaledImage src={imageSrc} />
            </FlexItem>
        );
    });

    return (
        <SectionContainer>
            <InnerSectionContainer>
                <SectionHeading>
                    {data.title}
                </SectionHeading>
                <FlexContainer>
                    {logoItems}
                </FlexContainer>
            </InnerSectionContainer>
        </SectionContainer>
    );
};

export default Logos;

Answer 1

我通常在我的代码库中有一个或多个consts.js文件。

如果它是静态的，则需要放在前端，并且仅用于一个组件，我只是将其与组件自己的文件放在一起。

如果同一组件结构下的几个组件正在使用它（例如，解决特定问题的组件具有一些子组件，但静态信息与该范围之外的任何其他组件无关），我将在该组件树上创建一个consts.js文件。

如果每个人都将使用它，例如，reactjs由于某种原因需要使用一组样式颜色，只需创建一个 global consts.js文件，然后根据需要导入。

话说回来，这就是我的用法。您可以创建自己的方法。尝试，尝试并使用最适合您的方法。

编辑：

我刚刚看到了这段代码：

const data = {
    title: 'Trusted by',
    imageSrcs: [
        require('../../../images/logo1.png'),
        require('../../../images/logo2.png'),
        require('../../../images/logo3.png')
    ]
};

这种方法适用于像我上面提到的consts.js这样的javascript文件类型，但是对于json文件来说否，因为您不能使用{{ 1}}里面（所有数据都是静态的。没有逻辑或导入）。

Answer 2

您应该倾向于声明尽可能接近将要使用的静态数据。换句话说，在使它对需要它的代码可见的最小范围内。

然后，在javascript中，如果需要数据：

通过一个函数，在函数中声明
通过一个文件，在文件中声明
通过对象/类/组件的方法，在类中声明为静态或实例属性
由用户声明类或对象，然后也声明为静态类
按照包中的几个组成部分，然后在switch(m) { case 1: case 2: // do something (when it's 1 or 2) break; default: // do something when it's not any of the numbers you expect break; }（或类似文件）中
通过许多类/组件，以“公共”或“库”包的形式声明文件并从文件中导出

我不会怀疑您如何构造示例；很好。除非您确定要至少将一个其他组件使用该数据，否则无需将该数据放入其自己的.js文件。即使那样，如果其他组件也需要您的utils.js组件，那么从现在的位置进行导出就可以了。

在决定如何构造事物时，我认为首要考虑应该是：对于将来的我的代码读者来说，如何才能最容易地弄清楚我做了什么。

如何存储组件本地的小块静态数据？

2 个答案: