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

时间:2016-10-28 20:00:13

标签: forms reactjs requirejs schema jsonschema

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

谢谢社区。

2 个答案:

答案 0 :(得分:0)

我能够解决这个问题,我在这里报告任何一个面临同类问题的解决方案。通过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. 在您的代码中,要求库和别名默认导出如下:

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

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

答案 1 :(得分:0)

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