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

问题描述

我正在尝试使用此库"react-jsonschema-form"来使用react和jsonschema创建表单.我正在尝试通过网站中的.js文件通过cdn包含网站示例中所描述的项目中的项目.它不起作用.导出的组件表单"未定义.

I am trying to use this library "react-jsonschema-form" to create forms using react and jsonschema. I am trying to use it in my project as described in the example from the website by including the .js file via cdn. It is not working. The exported component "Form" is undefined.

我看过类似的问题在js源映射中使用React组件，但我不明白所提供的解决方案.我应该为JSONSchemaForm的默认导出设置别名.但是什么是JSONSchemaForm?在哪里可以找到它?是要包含的另一个库吗?

I had a look at this similar question Using React component from js source maps but I could not understand the solution offered. I am supposed to alias the default export of JSONSchemaForm. But what is JSONSchemaForm? and where can I find it? Is it another library to be included?

这是我尝试做的事情:

使用Require.js我已经导入了CDN库:

Using Require.js I have imported the cdn library:

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

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

Then in my code I import the library:

var rf = require('react-forms')

但是现在当我访问Form(rf.Form)时，它是未定义的.我看了一下"react-jsonschema-form.js"源代码.表格"的定义无处.

But now when I access Form (rf.Form), it is undefined. I had a look at the "react-jsonschema-form.js" source code. "Form" is defined no where.

从库页面的说明中可以说:

From the instructions of the library page it is said:

    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也未定义.

But JSONSchemaForm is also undefined.

所以我不知道我在做什么错.如何通过将"react-jsonschema-form"库包含为脚本标签来使用它?

So I don't know what I am doing wrong. How can I use "react-jsonschema-form" library by including it as a script tag?

感谢社区.

Thank you community.

推荐答案

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使用它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！