Question

长话短说，我正在努力学习React以便在我的一个项目中使用。我现在正在尝试使用react组件（https://github.com/mozilla-services/react-jsonschema-form），但我不明白如何将它与CDN版本一起使用。所以有js file 和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（并且还能反应/反应），它应该有效，对吗？只有我收到错误：

embedded:18 Uncaught ReferenceError: Form is not defined

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

class Form extends Component

那么究竟应该如何使用它？因为我觉得我在这里遗漏了什么

Answer 1

表单仅在导入和别名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")
);

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

1 个答案: