react-jsonschema-form如何通过cdn使用它？

Posted 2021-04-09

我正在尝试使用这个库“react-jsonschema-form”来使用react和jsonschema创建表单。我试图在我的项目中使用它，如网站上的示例所述，通过cdn包含.js文件。它不起作用。导出的组件“表单”未定义。

我看过这个类似的问题Using React component from js source maps，但我无法理解所提供的解决方案。我应该为JSONSchemaForm的默认导出设置别名。但什么是JSONSchemaForm？我在哪里可以找到它？是否包含另一个图书馆？

这是我试图做的：

使用Require.js我已经导入了cdn库：

var require = {
        baseUrl: "/js/",
        waitSeconds: 600,
        paths: {              
            'react-forms': ['https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form']
        },            
    }

然后在我的代码中导入库：

var rf = require('react-forms')

但是现在当我访问Form（rf.Form）时，它是未定义的。我看了一下“react-jsonschema-form.js”源代码。 “表格”没有定义在哪里。

根据图书馆页面的说明，它说：

    You'll also need to alias the default export property to use the Form component:
    const Form = JSONSchemaForm.default;

    // or
    const {default: Form} = JSONSchemaForm;

但JSONSchemaForm也未定义。

所以我不知道我做错了什么。如何通过将“react-jsonschema-form”库包含为脚本标记来使用它？

谢谢社区。

答案

我能够解决这个问题，我在这里报告任何一个面临同类问题的解决方案。要通过cdn脚本标记（使用require.js）使用react-jsonschema-form：

1. 通过指示url路径，通过require.js包含此库： 路径：{ 'react-forms'：['https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form']}
2. 包括这个polyfill库：cdn.polyfill.io/v2/polyfill.min.js
3. 确保使用最新的反应版本（版本v15）
4. 在您的代码中，需要库和别名的默认导出，如下所示：

var rf = require（“react-forms”）; const Form = rf.default;

（这是因为我使用的是require.js模块系统。对于另一个模块系统，您可以使用JSONSchemaForm.default）

另一答案

1. Include the cdn path

        <script src="https://cdn.jsdelivr.net/npm/react-jsonschema-form@1.0.3/dist/react-jsonschema-form.js"></script>

    2.By using field get the access of jsonformDefaultValues;
` <script type="text/babel"
   const fields = JSONSchemaForm.default                        
   return(
   <Form 
        schema={schema}
        uiSchema={uiSchema}   
        field={fields}  
        onSubmit={onSubmit}    
   </Form>)   
   </script>`