0

首先，我查看了react-d3-tree github上的第40和95号问题，我 在 StackOverflow 上没有看到任何对我有帮助的东西。我正在尝试实现 parseJSON 方法，以便可以从项目文件夹中获取自己的 JSON 文件，然后生成树形图。

让我们从我一开始所做的开始。我复制粘贴了在崩溃前工作了 2 秒的示例代码。原因？服务器端渲染。太好了，所以我从 NextJS 中找到了这个，它允许我为某些组件禁用 SSR。嘿，现在示例代码正在运行。让我们试试他们使用外部数据的示例代码！不，它找不到 parseJSON 方法。我不知道该怎么做，找不到任何东西来解决这个问题。我正在尝试导入这个与 SSR 有一些问题的函数，但因为它不是一个组件，我无法使用动态导入它，并且我无法正常导入，因为它会导致“未定义窗口”错误因为SSR。以下是我的主要两个文件。

DynamicComponent.js [版本 1]

import dynamic from 'next/dynamic';

const Tree = dynamic(
  () => import('react-d3-tree'),
  { ssr: false },
);

export default Tree;

DynamicComponent.js [版本 2]

import dynamic from 'next/dynamic';

export const Tree = dynamic(
  () => import('react-d3-tree'),
  { ssr: false },
);

export const treeUtil = dynamic(
  () => import('react-d3-tree/src/util'),
  { ssr: false },
);

图/index.js

import React from 'react';
import { Tree, treeUtil } from '../DynamicComponent';

const myTreeData = require('../fakeData.json');

class Diagram extends React.PureComponent {
  constructor() {
    super();

    this.state = {
      data: undefined,
    };
  }

  componentWillMount() {
    treeUtil.parseJSON(myTreeData)
      .then((data) => {
        this.setState({ data });
      });
  }

  render() {
    return (
      <div
        id="treeWrapper"
        style={{ width: '50em', height: '20em' }}
      >
        <Tree data={this.state.data} />
      </div>
    );
  }
}

export default Diagram;

我在版本 1 中遇到的错误

ReferenceError: treeUtil is not defined

我在版本 2 中遇到的错误

TypeError: _DynamicComponent__WEBPACK_IMPORTED_MODULE_1__.treeUtil.parseJSON is not a function

请 StackOverflow，你是我唯一的希望。

4

2 回答 2

1

我在 Cytoscape 上遇到了同样的问题，这是一个类似的库（但专门用于图形网络可视化）。它需要大量的试验和错误，但解决方案是：

  1. 动态导入组件
  2. 删除导入 JSON 并将其内联到 js 文件中。出于某种愚蠢的原因，这对我有用，而且是神奇的解决方法。（您的 JSON 文件有多大？）在更糟糕的情况下尝试复制并粘贴到组件本身。

对于您的组件，请尝试以下操作：

// convert fakeData.json to fakeData.js
export default {...fake data here };

import React from 'react';
import dynamic from 'next/dynamic'
import myTreeData from 'fakeData';

const Tree = dynamic(
  () => import('./dynamicComponent'),
   { ssr: false }
);

// you can also delineate a loading component;


// converted to hooks for '21
 const Diagram = () => {
 
   const [data,setData] = useState({});


  useEffect(() => {
    treeUtil.parseJSON(myTreeData)
      .then((data) => {
        setData(data);
      })
  },[treeUtil,myTreeData,setData]);


    return (
      <div
        id="treeWrapper"
        style={{ width: '50em', height: '20em' }}
      >
        <Tree data={data} />
      </div>
    );
  }

export default Diagram;
于 2021-01-13T07:26:53.993 回答
0

我猜treeUtil它不是一个反应组件，所以你不能dynamic用来导入它。只需正常导入即可。

import dynamic from 'next/dynamic';

export const Tree = dynamic(
  () => import('react-d3-tree'),
  { ssr: false },
);

export { default as treeUtil } from 'react-d3-tree/src/util';
于 2020-07-17T00:46:14.213 回答