Question

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

让我们从我一开始所做的开始。我复制粘贴了示例代码，该代码在崩溃前已经工作了2秒钟。原因？服务器端渲染。很好，因此我发现this from NextJS允许我为某些组件禁用SSR。嘿，现在示例代码正在运行。让我们尝试example code where they use external data！不，它找不到parseJSON方法。我不知道该怎么办，找不到任何解决办法。我正在尝试导入该SSR有问题的函数，但是因为它不是组件，所以我无法使用dynamic导入它，并且由于其导致“未定义窗口”错误而无法正常导入因为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 },
);

Diagram / 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，您是我唯一的希望。

Answer 1

我在使用 Cytoscape 时遇到了同样的问题，这是一个类似的库（但专门用于图网络可视化）。经过大量的反复试验，但解决方案是：

动态导入组件
删除导入的 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;

Answer 2

我猜想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';

服务器端渲染带有react-d3-tree

2 个答案: