javascript - “未定义ReactFauxDOM”

尝试与D3和React一起玩。我正在使用OliverCaldwell的Faux-Dom元素。但是我有一个愚蠢的“未定义ReactFauxDOM”。但是我认为我已经正确安装了npm ...

我想念什么但是...

import React from "react"
import ReactDOM from "react-dom"
import Faux from "react-faux-dom"
import d3 from "d3"

var Chart = React.createClass({
  propTypes: {
    data: React.PropTypes.array
  },
  render: function () {
    var data = this.props.data
    var margin = {top: 20, right: 20, bottom: 30, left: 50}
    var width = 960 - margin.left - margin.right
    var height = 500 - margin.top - margin.bottom

    var parseDate = d3.time.format('%d-%b-%y').parse

    var x = d3.time.scale()
    .range([0, width])

    var y = d3.scale.linear()
    .range([height, 0])

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')

    var line = d3.svg.line()
    .x(function (d) { return x(d.date) })
    .y(function (d) { return y(d.close) })

    var node = ReactFauxDOM.createElement('svg')
    var svg = d3.select(node)
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

    data.forEach(function (d) {
      d.date = parseDate(d.date)
      d.close = +d.close
    })

    x.domain(d3.extent(data, function (d) { return d.date }))
    y.domain(d3.extent(data, function (d) { return d.close }))

    svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis)

    svg.append('g')
    .attr('class', 'y axis')
    .call(yAxis)
    .append('text')
    .attr('transform', 'rotate(-90)')
    .attr('y', 6)
    .attr('dy', '.71em')
    .style('text-anchor', 'end')
    .text('Price ($)')

    svg.append('path')
    .datum(data)
    .attr('class', 'line')
    .attr('d', line)

    return node.toReact()
  }
})

function render (data) {
  ReactDOM.render(React.createElement(Chart, {
    data: data
  }), document.getElementById('container'))
}

d3.tsv('./src/data.tsv', function (error, data) {
  if (error) {
    throw error
  }

  render(data)
})

最佳答案

您将其导入为Faux，而不是ReactFauxDOM

import Faux from "react-faux-dom"

所以大概你应该改变这个

var node = ReactFauxDOM.createElement('svg')

进入

var node = Faux.createElement('svg')