0

我正在学习反应。我正在尝试将来自https://github.com/rjsf-team/react-jsonschema-form?fbclid=IwAR0HdGosg659-F0hdFp-milh29G_6UX5_qbti6lZBmo7OYKIxgThD5f1Ff8的反应 FORM 组件添加到我的虚拟应用程序中。我使用了 react json 模式表单文档https://react-jsonschema-form.readthedocs.io/en/latest/#installation。

我有红色的使用来自 js 源映射的 React 组件 和react-jsonschema-form 如何通过 cdn 使用它？这可能正在解决类似的问题。但是，我仍然很挣扎。

我做了：

  1. npx create-react-app my-app

  2. cd my-app,npm install
    我的反应版本是
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"

  3. npm install @rjsf/core --save

我的虚拟 App.js 组件：

import React from 'react';
import Form from "@rjsf/core";

function App() {

  const Form = JSONSchemaForm.default;
const schema = {
  type: "string"
};

  return (
    <div className="App">
      <Form schema={schema} />
      
    </div>
  );
}

export default App;

我点击 npm start 并得到错误：

./src/App.js
  Line 6:16:  'JSONSchemaForm' is not defined  no-undef

据我了解，webpack 找不到 JSONSchemaForm 模块（？）我尝试将文档中的 cdn 文件添加到 index.html。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

    <script src="https://unpkg.com/@rjsf/core/dist/react-jsonschema-form.js"></script>
    
    <meta name="viewport" content="width=device-width, initial-scale=1" />

它没有帮助。文档说我应该添加一个源映射。但是，我不熟悉源映射。我在 mozilla MDN 上定义了红色，但我不知道如何实现它。我也不熟悉手动设置webpack配置，也不熟悉这个解决方案react-jsonschema-form中提到的require.js如何通过cdn使用？ .

问题是 - 添加源地图解决问题的可能性有多大？需要学习 webpack 吗？您是否看到我无法显示表单组件的其他原因？

如果添加 source map 可能会解决问题，那么在这种情况下，哪些 webpack 属性是必不可少的？

4

1 回答 1

0

我对 React 也有点陌生，但这是我的两分钱——当你已经导入Formusing import Form from "@rjsf/core";时，我认为你不再需要const Form = JSONSchemaForm.default;了。只需删除该const Form = JSONSchemaForm.default;行并重试。

于 2020-10-31T08:13:00.050 回答