如何在 create-react-app 中使用 react-d3-components答案

【问题标题】：How to use react-d3-components in create-react-app如何在 create-react-app 中使用 react-d3-components
【发布时间】：2018-06-29 12:47:43
【问题描述】：

我想使用https://github.com/codesuki/react-d3-components 上的图表使用 create-react-app 创建的我的反应应用程序。如何集成代码？

用途：

var BarChart = ReactD3.BarChart;

var data = [{
    label: 'somethingA',
    values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]
}];

React.render(
    <BarChart
        data={data}
        width={400}
        height={400}
        margin={{top: 10, bottom: 50, left: 50, right: 10}}/>,
    document.getElementById('location')
);

在以下位置生成图表：

import React from 'react';


class Lifecycle extends React.Component {
    render() {
        return (
            <div>

               {*/BarChart Appear Here*/}

            </div>
        );
    }
}

export default Lifecycle;

【问题讨论】：

导出 BarChart 组件，将其导入 Lifecycle 或您要使用的任何其他组件。

标签： javascript reactjs d3.js create-react-app react-d3

【解决方案1】：

import React from "react";
import { BarChart } from "react-d3-components";

function BarChartContainer() {
  let data = [
    {
      label: "somethingA",
      values: [
        { x: "SomethingA", y: 10 },
        { x: "SomethingB", y: 4 },
        { x: "SomethingC", y: 3 }
      ]
    }
  ];
  return (
    <BarChart
      data={data}
      width={400}
      height={400}
      margin={{ top: 10, bottom: 50, left: 50, right: 10 }}
    />
  );
}
export default BarChartContainer;

用法

import React from "react";
import ReactDOM from "react-dom";
import BarChartContainer from "./BarChartContainer";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <BarChartContainer />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：