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

【问题标题】：react-jsonschema-form How to use it via cdn?react-jsonschema-form 如何通过cdn使用？
【发布时间】：2016-10-28 20:00:12
【问题描述】：

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

我看过这个类似的问题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”库包含为脚本标签来使用它？

感谢社区。p>

【问题讨论】：

标签： forms reactjs requirejs schema jsonschema

【解决方案1】：

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

通过 require.js 通过指明 url 路径来包含这个库：

路径：{
'反应形式'：['https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form'] }
包含这个 polyfill 库：cdn.polyfill.io/v2/polyfill.min.js
确保使用最新的 React 版本（版本 v15）
在您的代码中，要求库并为其默认导出设置别名，如下所示：

var rf = require("react-forms"); const Form = rf.default;

（这是因为我使用的是require.js模块系统，其他模块系统可以使用JSONSchemaForm.default）

【讨论】：

【解决方案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>`

【讨论】：