使用來自 js 源映射的 React 組件

Question

長話短說，我正在嘗試學習 React 以在我的一個項目中使用。 我現在正在嘗試使用 react 組件（ https://github.com/mozilla-services/react-jsonschema-form ），但我不明白如何將它與 CDN 版本一起使用。 所以有一個js文件，還有一個source map

該組件看起來非常易於使用：

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）並且它應該可以工作，對吧？ 只有我收到錯誤：

embedded:18 Uncaught ReferenceError: Form is not defined

當我查看 js 文件時，我沒有看到指定的 Form 組件，而我在地圖中看到了它：

class Form extends Component

那么具體應該如何使用呢？ 因為我覺得我在這里錯過了一些東西

Answer 1

Form 僅在導入和別名JSONSchemaForm模塊后的示例中可用，這就是它沒有出現在縮小版本中的原因。

import Form from "react-jsonschema-form";

但是，編譯后的 ES 模塊在 CDN 版本中作為JSONSchemaForm添加到全局命名空間中，您可以手動訪問其默認導出屬性。

const Form = JSONSchemaForm.default;

然后將其用作 React 組件。

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