使用 react-d3-tree 进行服务器端渲染的 NextJS 问题

Question

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

让我们从我一开始所做的开始。我复制粘贴了在崩溃前工作了 2 秒的示例代码。原因？服务器端渲染。太好了，所以我找到了this from NextJS，它允许我禁用某些组件的 SSR。嘿，现在示例代码正在运行。让我们试试example code where they use external data！不，它找不到 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，你是我唯一的希望。

Answer 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;

Answer 2

我猜treeUtil 不是一个react 组件，所以你不能使用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';