反应，从另一个组件读取常量

Question

我有以下 2 个组件：

BasicMaintainer

// etc...
import GeneratingUnit from "./generating-unit";
class BasicMaintainer extends Component {
constructor(props) {
super(props);
// etc...
}
// etc...
handleOnSelectFile = event => {
here I want to use: GeneratingUnit.columns.length
}

GeneratingUnit的另一个组件是：

import React from 'react';
//...code
export const columns = [
{name: 'ID', numeric: false, disablePadding: true, key: 'id'},
{name: 'NOMBRE', numeric: false, disablePadding: true, key: 'nombre'},
{name: 'DESCRIPCIÓN', numeric: false, disablePadding: true, key: 'descripcion'},
{name: 'IT UNIDAD GENERADORA', numeric: false, disablePadding: true, key: 'it_unidad_generadora'},
]
const GeneratingUnit = props => <div>
//code...
</div>
export default GeneratingUnit;

如何在handleOnSelectFile组件中使用const columnsBasicMaintainer？

Answer 1

将其导入到BasicMaintainer文件中：

import GeneratingUnit, {columns} from "./generating-unit";

Answer 2

如果不修改此变量： 从组件中删除columns变量，并将当前模块放入包含全局变量和函数的共享文件夹中，然后导入组件。

folder: shared
file: index.js

索引.js

export const columns = [
{name: 'ID', numeric: false, disablePadding: true, key: 'id'},
{name: 'NOMBRE', numeric: false, disablePadding: true, key: 'nombre'},
{name: 'DESCRIPCIÓN', numeric: false, disablePadding: true, key: 'descripcion'},
{name: 'IT UNIDAD GENERADORA', numeric: false, disablePadding: true, key: 'it_unidad_generadora'},
]

在组件中：

import { columns } from "./shared";