Question

编辑：我实际上不确定是否是我（a）导入错误或（b）调用函数错误...

我已经看过相关的帖子（d3-tip导入/设置问题），但是他们似乎都没有涉及让它在React中运行的具体问题。

我有一个带有组件的反应应用程序是一个简单的d3图形组件。我的d3组件js文件的导入行以及d3.hexbin和d3.tip的调用如下所示：

myD3Component.js

import React, { Component } from 'react';
import * as d3 from "d3";
import * as d3Tip from "d3-tip";
import * as d3Hexbin from "d3.hexbin";

class myD3Component extends Component {
    constructor() { ... }

    helperFunc() {
      var hexbin = d3.hexbin()
        .radius(1.5)
        .x(d => d.key[0])  
        .y(d => d.key[1]); 

      var tip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-20,0])
          .html('work come on baby lets work for once for me')    

      ...
    }

以这种方式导入无效，我收到以下错误：

335:16-25 "export 'hexbin' (imported as 'd3') was not found in 'd3'
341:3-9 "export 'tip' (imported as 'd3') was not found in 'd3'
...

我的package.json具有以下所有依赖项：

"dependencies": {
    "@fortawesome/fontawesome": "^1.1.5",
    "@fortawesome/fontawesome-free-solid": "^5.0.10",
    "@fortawesome/react-fontawesome": "0.0.18",
    "d3": "^5.0.0",
    "d3-hexbin": "^0.2.2",
    "d3-tip": "^0.7.1",
    "jquery": "^3.3.1",
    "plotly.js": "^1.35.2",
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.2.0",
    "react-icons": "^2.2.7",
    "react-plotly.js": "^2.1.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1",
    "react-select": "^1.2.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },

对此有任何帮助。今天和过去几天，这对我来说是一场艰巨的斗争。在codepen中我已经能够构建我的组件并且没有导入d3-tip和d3-hexbin的问题，但这是因为我可以在codepen javascript pen设置窗口中手动添加脚本。

提前致谢！

编辑2：我设法转移到了一个新错误：

Module not found: Can't resolve 'd3.hexbin' in ...

编辑3：上面的错误是愚蠢的，我输入的是'd3.hexbin'应该是d3-hexbin ...

Answer 1

所以...几件事...

如果您进行

import * as d3 from "d3";

您将无法执行d3.bananas = 'whatever';，因为d3是一个模块，而不是原始Javascript对象。 React编译器讨厌您将事物分配到Module中。（如果我对这种行为有误，可以让更熟悉js中的Module类型的人让我们知道吗？）

您可以做的...（有点粗略）是将导入的模块复制到新的原始Javascript对象中。然后您可以随心所欲地欺骗它，尽管这样做可能不是一个好习惯，因为您可以随心所欲地欺骗它。

import * as d3module from 'd3'
import d3tip from 'd3tip'
const d3 = {
  ...d3module,
  tip: d3tip
}

我用 d3@5.12.0 和 d3-tip@0.9.1 对此进行了简短的测试，似乎还可以。

无法将d3-tip或d3-hexbin导入React组件

1 个答案: