Question

我正在尝试使用这个库“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”库包含为脚本标记来使用它？

谢谢社区。

Answer 1

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

通过指示url路径来通过require.js包含此库：

路径：{
＆＃39; react-forms＆＃39;：[＆＃39; https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form＆＃39;] }
包含此polyfill库：cdn.polyfill.io/v2/polyfill.min.js
确保使用最新的反应版本（版本v15）
在您的代码中，要求库和别名默认导出如下：

var rf = require（＆＃34; react-forms＆＃34;）; const Form = rf.default;

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

Answer 2

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>`

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

2 个答案: