使用来自 js 源映射的 React 组件

IT技术 reactjs
2021-05-13 19:12:22

长话短说,我正在尝试学习 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

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

1个回答

表单仅在导入和别名JSONSchemaFormmodule后的示例中可用,这就是它没有出现在缩小版本中的原因。

import Form from "react-jsonschema-form";

但是,编译后的 ES module会像JSONSchemaFormCDN 版本一样添加到全局命名空间中,您可以手动访问其默认导出属性。

const Form = JSONSchemaForm.default;

然后将其用作 React 组件。

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