有没有办法将 React 状态推送到导入语句中？答案

【问题标题】：Is There Any Way to Push React State Into an Import Statement?有没有办法将 React 状态推送到导入语句中？
【发布时间】：2020-09-04 00:40:16
【问题描述】：

所以在 React 中，我使用如下语句导入某个文件：

import Search from './Pages/search';

但是，如果每次调用某个函数时我要导入的文件都不同，该怎么办？会是这样吗-

import {this.state.fileName} from './Pages/{this.state.extension}';

状态值由外部函数填充，按我想要的方式工作？假设我想下载与该动态导入关联的文件。会是这样吗-

<a href = {this.state.fileName} download> download </a>

允许我下载文件吗？有没有更好的方法来解决这个问题？很想知道。

【问题讨论】：

标签： javascript reactjs import download state

【解决方案1】：

如果您要导入的页面经常更改，那么您的组件可能可以接受 fileName 属性，然后您可以使用该属性动态导入该文件。

可能是这样的：https://codesandbox.io/s/nervous-bush-xf1zg。在这里，文件名随着每次DynamicPage 调用而变化，传入的文件名在DynamicPage 函数中动态导入。

**没有完全理解你想要做什么，但希望这会有所帮助

import React, { lazy, Suspense } from "react";

export default function App() {
  return (
    <div>
      <DynamicPage fileName="File1" />
      <DynamicPage fileName="File2" />
    </div>
  );
}

function DynamicPage({ fileName }) {
  const DynamicFile = lazy(() => import(`./${fileName}`));

  return (
    <Suspense fallback={"Loading.."}>
      <DynamicFile />
    </Suspense>
  );
}

import React from "react";

export default function File1() {
  return (
    <div>
      <h1>File 1</h1>
    </div>
  );
}

import React from "react";

export default function File2() {
  return (
    <div>
      <h1>File 2</h1>
    </div>
  );
}

【讨论】：

【解决方案2】：

您似乎需要在组件之间共享状态。你可以：

将其作为 props 从父级手动传递给每个子级

或使用 React ContextApi 库

或使用一些库，例如

后坐力

Redux（更复杂）

【讨论】：