react-json-tree 想要默认值

Question

我尝试使用此模块来显示 json https://www.npmjs.com/package/react-json-tree

我的示例代码是

import React from "react";
import { JSONTree } from 'react-json-tree'

const JsonViewer = () => {

  const json = {
    array: [1, 2, 3],
    bool: true,
    object: {
      foo: 'bar',
    },
    immutable: Map({ key: 'value' }),
  };

  return (
    <JSONTree data={json} />
  )
};
export default JsonViewer;

在我的 App.jsx 中，我正在调用

<JsonViewer />

当我在浏览器中打开网站时，我总是会遇到

Build Result Error: There was a problem with a file build result.
Error: Module "react-json-tree" has no exported member "default". Did you mean to use "import default from 'react-json-tree'" instead?

Source
/home/daniel/projects/tsi/scale_test/src/components/JsonViewer.jsx

Error: Module "react-json-tree" has no exported member "default". Did you mean to use "import default from 'react-json-tree'" instead?
    at Object.install (/home/daniel/projects/tsi/scale_test/node_modules/snowpack/lib/index.js:44237:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async Object.installPackages (/home/daniel/projects/tsi/scale_test/node_modules/snowpack/lib/index.js:54326:25)
    at async inProgressBuilds.add.priority (/home/daniel/projects/tsi/scale_test/node_modules/snowpack/lib/index.js:54727:35)
    at async run (/home/daniel/projects/tsi/scale_test/node_modules/snowpack/lib/index.js:47005:29)

我该如何解决这个问题？

Answer 1

在较高的层面上，您似乎正在尝试使用不可变的

Map

，但您缺少导入。

方法：1 `

import { JSONTree } from 'react-json-tree';
import { Map } from 'immutable';

const JsonViewer = () => {
  const json = {
    array: [1, 2, 3],
    bool: true,
    object: {
      foo: 'bar'
    },
    immutable: Map({ key: 'value' }),
  };

  return <JSONTree data={json} />;
};

export default JsonViewer;

`

方法：2

否则，如果您不想使用 immutable 那么您可以将 json 对象修改为

immutable: new Map().set('key', 'value')

`

import { JSONTree } from 'react-json-tree';

const JsonViewer = () => {
  const json = {
    array: [1, 2, 3],
    bool: true,
    object: {
      foo: 'bar'
    },
    immutable: new Map().set('key', 'value')
  };

  return <JSONTree data={json} />;
};

`