Question

这是我第一次开发React应用程序。

我在从另一个组件中检索const数据时遇到困难。

这是我要访问其他组件的const。

TableComponent.js

export default function({ infinite }) {
const [checkedMap, setCheckedMap] = useState(new Map());

const viewDetails = () => {
    return (
      "url here" +
      Array.from(checkedMap.keys()).join() +
      "/details"
    );
  };
}

//other codes

有没有一种方法可以将viewDetails访问其他组件？

谢谢。

Answer 1

如果您export const：

export const viewDetails = () => {
    return (
      "url here" +
      Array.from(checkedMap.keys()).join() +
      "/details"
    );
  };
}

这必须在模块作用域内（与默认导出处于同一级别）：

export const viewDetails = () => {}
export default function({ infinite }) {}

然后可以从其他组件导入：

import { viewDetails } from './TableComponent';

如果要导入两者，则默认导出和命名的导出：

import TableComponent, { viewDetails } from './TableComponent';

最后，您还可以从默认导入中访问命名的导入：

import TableComponent from './TableComponent';
TableComponent.viewDetails();

Answer 2

您必须返回const viewDetails ...您需要自调用函数还是返回该函数...例如

export default function({ infinite }) {
const viewDetails = () => {
    return (
      "url here" +
      Array.from(checkedMap.keys()).join() +
      "/details"
    );
  };
return viewDetails;
}

Answer 3

//TableComponent.js

export const viewDetails = () => {
  return (
    "url here" +
    Array.from(checkedMap.keys()).join() +
    "/details"
  );
};

在另一个文件中，您可以按以下方式访问此const

import { viewDetails } from './TableComponent';

Answer 4

const viewDetails = () => {
  return (
    "url here" +
    Array.from(checkedMap.keys()).join() +
    "/details"
  );
};

export default viewDetails;

从react中的另一个组件访问const的方法

4 个答案: