Question

是React的新手，我有一个项目，将其安装到我的项目并创建此类后，将使用D3创建图表：

import React, { Component } from 'react';
var ReactDOM = require('react-dom');
var LineChart = require('react-d3-basic').LineChart;

class TempChart extends Component{
constructor(){
    super();
    this.state={
        generalChartData:{},
        chartSeries:[],
        x:0
    }
}

componentWillMount(){
    fetch("my JSON url was here")
    .then(response=>response.json())
    .then((findresponse)=>{
        this.setState({
            generalChartData:findresponse.feeds.map((feed, i) => parseFloat(feed.field1)),
            chartSeries:[
              {
                field: 'age',
                name: 'Age',
                color: '#ff7f0e',
                style: {
                  "stroke-width": 2,
                  "stroke-opacity": .2,
                  "fill-opacity": .2
                }
              }
            ],
            x:function(d) {
              return d.index;
            }
        })
    })
}

render(){
    return (
        <LineChart
          width= {600}
          height= {300}
          data= {this.state.generalChartData}
          chartSeries= {this.state.chartSeries}
          x= {this.state.x}
        />
    );
}


}
   export default TempChart;

但是结果是我得到了这样的错误：

我知道在React 15.5版之后，您必须从如下所示的prop-type导入PropType：

import PropTypes from 'prop-types';

或

var PropTypes = require('prop-types');

现在我的问题是我将其导入到哪里，因为所有D3文件都使用导致问题的旧PropType，并且D3库中有很多文件，所以我无法在每个文件中导入新文件。

这是我的package.json文件：

{
  "name": "d3app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-d3-basic": "^1.6.11",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

该库似乎有问题。当前，它使用旧版本的React（v 0.14）作为对等依赖。就像您说的那样，对prop-types进行了15.5更改。您可以派生该库并更改prop-types（例如：https://github.com/react-d3/react-d3-basic/pull/51/files），但是它需要由库维护者修复。

以下是一个更详细的问题：https://github.com/react-d3/react-d3-basic/issues/56

React和D3：无法读取未定义的属性“ X”

1 个答案: