React-d3 findComponentRoot（...，.0.0.1.0.0.1.0。$ / = 13.0。$ faux-dom-0）：無法找到元素

Question

我嘗試將react和react-d3一起使用react，但是我一直都報錯，第一次，我使用react v16但是它請求React v0.14.9 。
現在，我可以在錯誤出現之前查看圖表。
我已經從react d3使用了這個tuto 。

設置后出現該錯誤：

findComponentRoot(..., .0.0.1.0.0.1.0.$/=13.0.$faux-dom-0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ''.

聽起來我有一張桌子，但沒有，App.js看起來像：

import React, { Component } from 'react';
import './App.css';
import {Chart} from 'react-d3-core';
import {LineChart} from 'react-d3-basic';

class App extends Component {

  render() {
    var chartData = [
        {data: 2000}
    ]
    var width = 700,
    height = 300,
    margins = {left: 100, right: 100, top: 50, bottom: 50},
    title = "User sample",
    // chart series,
    // field: is what field your data want to be selected
    // name: the name of the field that display in legend
    // color: what color is the line
    chartSeries = [
      {
        field: 'BMI',
        name: 'BMI',
        color: '#ff7f0e'
      }
    ],
    // your x accessor
    x = function(d) {
      return d.index;
    }

    return (
      <div className="App">
            <Chart
              title={title}
              width={width}
              height={height}
              margins= {margins}
              >
              <LineChart
                showXGrid= {false}
                showYGrid= {false}
                margins= {margins}
                title={title}
                data={chartData}
                width={width}
                height={height}
                chartSeries={chartSeries}
                x={x}
              />
            </Chart>
      </div>
    );
  }
}

export default App;

---

package.json

 { "name": "reactd3", "version": "0.1.0", "private": true, "dependencies": { "ajv": "^6.5.2", "babel-loader": "^7.1.5", "html-webpack-plugin": "^3.2.0", "react": "^0.14.9", "react-d3": "^0.4.0", "react-d3-basic": "^1.6.11", "react-dom": "^0.14.9", "react-scripts": "1.1.4", "style-loader": "^0.21.0", "webpack": "^4.16.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "devDependencies": { "webpack-cli": "^3.1.0" } } 

由於Chart沒有表格形式，因此沒有理由出現該錯誤。

我嘗試在它之前與react16一起使用，但沒有成功，出現很多錯誤...

編輯：現在我們使用d3.js而不是react-d3 ，它可以工作，但是如果有人有解決此問題的方法更好。

Answer 1

恕我直言，此錯誤與整個應用程序根目錄（HTML中的“ root”）無關，而是與子組件之一相關。

在早期版本的react中，渲染的DOM節點由其他html屬性“ data-reactid”標識，該屬性具有與虛擬節點路徑相關的值。 “ .0.0.1.0.0.1.0 ...”就是一個例子。

此錯誤意味着react在虛擬樹中擁有此節點，想要在DOM中對其進行更新，但是由於某種原因，DOM節點（使用此ID較早呈現）消失了。 也許瀏覽器“糾正”了不良的html結構？ 這可能與任何html錯誤有關，表顯示為示例原因。

有什么理由不從未維護的“ react-d3”切換到“ react-d3-components”？