reactjs – 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-d3的反应,但我一直都在收到错误,第一次,我使用了反应v16,但它请求React v0.14.9.
所以现在我可以在出现错误之前看到图表.
我用过 this tuto from react d3.

设置后出现错误

  1. 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看起来像:

  1. import React,{ Component } from 'react';
  2. import './App.css';
  3. import {Chart} from 'react-d3-core';
  4. import {LineChart} from 'react-d3-basic';
  5.  
  6. class App extends Component {
  7.  
  8. render() {
  9. var chartData = [
  10. {data: 2000}
  11. ]
  12. 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
  13. // name: the name of the field that display in legend
  14. // color: what color is the line
  15. chartSeries = [
  16. {
  17. field: 'BMI',name: 'BMI',color: '#ff7f0e'
  18. }
  19. ],// your x accessor
  20. x = function(d) {
  21. return d.index;
  22. }
  23.  
  24. return (
  25. <div className="App">
  26. <Chart
  27. title={title}
  28. width={width}
  29. height={height}
  30. margins= {margins}
  31. >
  32. <LineChart
  33. showXGrid= {false}
  34. showYGrid= {false}
  35. margins= {margins}
  36. title={title}
  37. data={chartData}
  38. width={width}
  39. height={height}
  40. chartSeries={chartSeries}
  41. x={x}
  42. />
  43. </Chart>
  44. </div>
  45. );
  46. }
  47. }
  48.  
  49. export default App;

的package.json

  1. {
  2. "name": "reactd3","version": "0.1.0","private": true,"dependencies": {
  3. "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"
  4. },"scripts": {
  5. "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"
  6. },"devDependencies": {
  7. "webpack-cli": "^3.1.0"
  8. }
  9. }

没有理由出现该错误,因为Chart没有表格形式.

我尝试在使用react16之前使用但没有成功,很多错误……

编辑:现在我们使用d3.js而不是react-d3它可以工作,但如果有人有问题要解决它会更好.

恕我直言这个错误与整个应用程序根目录(html中的“root”)无关,而是与子组件之一有关.

在早期版本的反应渲染中,DOM节点由附加的html属性“data-reactid”标识,其中的值与虚拟节点路径相关. ‘.0.0.1.0.0.1.0 ……’就是一个例子.

这个错误意味着react在虚拟树中有这个节点,想在DOM中更新它,但由于某种原因,DOM节点(先前用这个id渲染)消失了.也许浏览器’纠正’糟糕的HTML结构?这可能与任何html错误有关,表格显示为示例原因.

有没有理由不将’react-d3’保持为’react-d3-components’?

猜你在找的React相关文章