时间戳

首页 > 解决方案 > React-d3 findComponentRoot(..., .0.0.1.0.0.1.0.$/=13.0.$faux-dom-0): 找不到元素

reactjs - React-d3 findComponentRoot(..., .0.0.1.0.0.1.0.$/=13.0.$faux-dom-0): 找不到元素

问题描述

我尝试使用 react withreact-d3但我一直收到错误，第一次我有使用react v16但它请求React v0.14.9。
所以现在我可以在错误出现之前看到图表。
我已经使用了 react d3中的这个教程。

在那里设置后出现错误：

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;

包.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并且它可以工作，但如果有人有这个问题来解决它，那就更好了。

标签： reactjsreact-d3

解决方案

恕我直言，此错误与整个应用程序根目录（html 中的“根”）无关，而是与子组件之一相关。

在早期版本的 react 渲染的 DOM 节点由附加的 html 属性“data-reactid”标识，其值与虚拟节点路径相关。'.0.0.1.0.0.1.0...' 就是一个例子。

这个错误意味着反应在虚拟树中有这个节点，想要在 DOM 中更新它，但是由于某种原因 DOM 节点（之前用这个 id 渲染）消失了。也许浏览器“纠正”了糟糕的 html 结构？这可能与任何 html 错误有关，表格显示为示例原因。

有什么理由不从未维护的“react-d3”切换到“react-d3-components”？

推荐阅读