使用来自 js 源映射的 React 组件 [英] Using React component from js source maps

问题描述

长话短说，我正在尝试学习 React 以在我的一个项目中使用.我现在正在尝试使用反应组件(https://github.com/mozilla-services/react-jsonschema-form) 但我不明白如何在 CDN 版本中使用它.所以有一个 js 文件 和一个 源图

Long story short, I'm trying to learn React to use in one of my projects. I'm now trying to use a react component (https://github.com/mozilla-services/react-jsonschema-form) but I don't understand how to use it with the CDN version. So there is a js file and also a source map

该组件看起来非常易于使用:

The component looks pretty straight forward to use:

const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: {type: "string", title: "Title", default: "A new task"},
    done: {type: "boolean", title: "Done?", default: false}
  }
};

const formData = {
  title: "First task",
  done: true
};

const log = (type) => console.log.bind(console, type);

render((
  <Form schema={schema}
        formData={formData}
        onChange={log("changed")}
        onSubmit={log("submitted")}
        onError={log("errors")} />
), document.getElementById("app"));

如果我理解正确，使用 CDN 方法，我应该能够只包含 js(以及 react/react-dom)，它应该可以工作，对吗?只有我收到错误:

If I correctly understood, using the CDN approach, I should be able to just include the js(and also react/react-dom) and it should work, right? Only I get an error:

embedded:18 Uncaught ReferenceError: Form is not defined

当我查看 js 文件时，我没有看到指定的 Form 组件，而我在地图中看到了它:

When I look in the js file, I don't see the Form component specified, while I do see it in the map:

class Form extends Component

那么究竟应该如何使用呢?因为我觉得我在这里错过了一些东西

So how exactly should this be used? As I feel I'm missing something here

推荐答案

Form 仅在导入和别名 JSONSchemaForm 模块后才在示例中可用，这就是为什么它没有出现在缩小的版本.

Form is only available in the examples after importing and aliasing the JSONSchemaForm module which is why it doesn't show up in the minified version.

import Form from "react-jsonschema-form";

但是，编译后的 ES 模块在 CDN 版本中作为 JSONSchemaForm 添加到全局命名空间中，您可以手动访问其默认导出属性.

However, the compiled ES module is added to the global namespace as JSONSchemaForm in the CDN version and you can manually access its default export property.

const Form = JSONSchemaForm.default;

然后将其用作 React 组件.

Then use it as a React component.

ReactDOM.render((
  <Form schema={schema}
    formData={formData}
    onChange={log("changed")}
    onSubmit={log("submitted")}
    onError={log("errors")} />
  ),
  document.getElementById("app")
);

这篇关于使用来自 js 源映射的 React 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！