如何解决有什么方法可以将React状态推入导入语句吗?
因此在React中,我使用如下语句导入某个文件:
import Search from './Pages/search';
但是,如果我每次要调用某个功能时要导入的文件都不同怎么办?这样吗-
import {this.state.fileName} from './Pages/{this.state.extension}';
状态值是由外部函数填充的,是否像我想要的那样工作?假设我要下载与该动态导入关联的文件。这样吗-
<a href = {this.state.fileName} download> download </a>
允许我下载文件吗?有没有更好的方法来解决这个问题?很好奇。
解决方法
如果您要导入的页面经常更改,则可能是您的组件可以接受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>
);
}
,
似乎您需要在组件之间共享状态。 您可以:
将其作为道具从父母那里手动传递给每个孩子
或使用React ContextApi库
或使用某些库,例如
反冲
Redux(更复杂)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。