标签: react-d3

我将React版本从0.12.2升级到0.13.2,将我的React-Router从0.12.4升级到0.13.2.只进行这两个升级,没有别的,我现在加载我的网页/应用程序时出现以下错误:

Uncaught TypeError: Cannot read property '_currentElement' of null

可能导致这种情况的任何想法？我似乎有一些潜在的React-Router错误的引用,但没有任何确定性.

导致错误的特定行是:

ReactRef.detachRefs(internalInstance, internalInstance._currentElement);

更新1:我也刚刚从版本1.0.0升级到1.1.0并且根据@ BinaryMuse的评论将react-boot-bootstrap(我还没有实际使用)从0.9.1升级到0.13.0 - 没有变化.

更新2:经过进一步测试后,我将其缩小为react-d3的问题.从我的站点禁用react-d3代码会导致错误消失.我正在删除路由代码以使帖子更简洁,因为我现在相当确信react-router不会导致此问题.

更新3:感谢@CoryDanielson为react-d3创建新标签.

的package.json

{
  "author": "me",
  "name": "my project",
  "description": "my awesome project",
  "version": "0.1.0",
  "dependencies": {
    "bootstrap": "^3.3.2",
    "d3": "^3.5.5",
    "font-awesome": "^4.3.0",
    "jquery": "^2.1.3",
    "react": "^0.13.2",
    "react-bootstrap": "^0.21.0",
    "react-d3": "^0.3.1",
    "react-router": "^0.13.2",
    "react-router-bootstrap": "~0.13.0",
    "reflux": "^0.2.6",
    "uuid": "^2.0.1"
  },
  "devDependencies": {
    "browser-sync": "^2.2.2",
    "browserify": "^9.0.3",
    "del": "^1.1.1",
    "envify": "^3.4.0",
    "gulp": "^3.8.11",
    "gulp-css-url-adjuster": "^0.2.3",
    "gulp-jshint": "^1.9.2", …

我尝试使用反应,react-d3但我一直在收到错误,第一次,我已经使用react v16但它要求React v0.14.9.
所以现在我可以在出现错误之前看到图表.
我用反应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} …

我已经执行了在react-d3中获取图表的分步说明:

http://www.reactd3.org/get_start/

我把它添加到我的代码中,我什么都没看到.

但是,如果我检查,那么我确实看到一个包含一些东西的SVG标签.

某些元素是否已被展平,或者您是否需要设置一些内容以在浏览器中显示SVG？

我的确切代码如下所示:

import React from 'react';

var Chart = require('react-d3-core').Chart;
var LineChart = require('react-d3-basic').LineChart;

class WelcomeView extends React.Component {

  render() {

    var chartData = [
      {"name":"Darron Weissnat IV","BMI":20.72,"age":39,"birthday":"2005-01-03T00:00:00.000Z","city":"East Russel","married":false,"index":0},
      {"name":"Guido Conroy","BMI":25.17,"age":39,"birthday":"1977-04-20T00:00:00.000Z","city":"Scarlettland","married":true,"index":20},
      {"name":"Miss Demond Weissnat V","BMI":21.44,"age":19,"birthday":"2007-06-09T00:00:00.000Z","city":"Savionberg","married":false,"index":21},
      {"name":"Easton Mante","BMI":20.61,"age":43,"birthday":"2007-01-29T00:00:00.000Z","city":"Kutchberg","married":false,"index":22},
      {"name":"Dayton Ebert","BMI":29.88,"age":20,"birthday":"1978-04-27T00:00:00.000Z","city":"West Wiley","married":true,"index":23}
    ]

    var width = 700,
      height = 300,
      margins = {left: 100, right: 100, top: 50, bottom: 50},
      title = "User sample",
      chartSeries = [
        {
          field: 'BMI',
          name: 'BMI', …