我正在开发一个呈现任务列表的应用程序。当用户单击任务时，它应该显示一个表单，以便用户可以更新该任务的状态。但是，任务的类型不同，并且需要根据任务类型显示正确的表单。每种任务类型都有一个任务定义，其中包含一个字段，该字段标识该任务所需的形式。当某人单击任务时，该任务对象（包括任务formComponent）将传递到formWrapper组件。每个表单组件都在一个JSX文件中，并且都被导出为TaskForm。
我需要根据任务定义选择组件。我以为可以通过react.Lazy完成以下操作：
在formWrapper的componentDidMount（）中：
// Store the path to the required JSX file in the state.
this.setState( {formFile: '../Processes/'+this.state.task.formComponent} );
然后在formWrapper的render（）中：
TaskForm = React.lazy(() => import(this.state.formFile));
return (
<Suspense fallback={<div>Loading...</div>}>
<TaskForm task={this.props.task} />
</Suspense>
但是，当我启动node.js时，它将引发警告“关键依赖项：依赖项的请求是一个表达式”，并且该表单无法加载。
我甚至快要走对了吗？我无法静态定义表单。其中有几种，它们可能会发生变化。
在与@backtick交换之后，我最终的解决方案是将所有JSX表单文件放置在一个带有index.js文件的文件夹中，该文件将文件夹中的每个表单导出（文件中没有其他代码，只导出了） ：
export { Form1 } from './Form1';
export { Form2 } from './Form2';
然后，在需要加载其中一种表单的文档中，我从数据库中读取了表单名称，并使用它在我的render（）函数中延迟加载了表单：
const MyForm = React.lazy(() => import('../forms')
.then(forms => (
{ default: forms[this.state.formFile] }
))
);
.then函数将选定的表单导出为默认表单，以便MyForm中仅存储一个组件。如果this.state.formFile = Form1，它将加载Form1。
在表单的return（）中，我将MyForm作为组件包括在内：
<Suspense fallback={<div>Loading...</div>}>
<MyForm task={this.props.task} formVariables={this.state.formVariables}/>
</Suspense>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句