在 React Components 中模拟数据

Question

我正在为图表使用数据装置（使用 Recharts）

看这里

const charts = [
  {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
  {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
  {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
  {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
  {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
  {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
  {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];

然后我有我的 ChartGrid 组件，我想在其中显示每个 Chart

export default class ChartsGrid extends React.Component{

  render() {

    return (
      <div className="grid">
        {this.props.charts.map((chart, i) => <Chart {...this.props} key={i} i={i} chart={chart} />)}
      </div>
    )
  }
};

这是单个 图表组件

export default class Chart extends React.Component {

  render () {
    const { charts, i} = this.props;
    return (
        <LineChart width={600} height={300} data={charts}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <XAxis dataKey="name"/>
       <YAxis/>
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <Legend />
       <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
       <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    );
  }
};

一切正常，请看图片，其中有 7 个图表代表相同的数据

如何更改我的数据装置，以便只有一个图表元素包含此数据？

Answer 1

所以你的问题是，当你使用 charts.map 时，你告诉 React 为图表数组中的每个项目呈现单个图表组件，但将整个图表数组作为你使用的数据传递对于图表。

这个位正在做这个

{this.props.charts.map((chart, i) => <Chart {...this.props} key={i} i={i} chart={chart} />)}

所以你告诉它渲染同一个图表的次数与数组中项目的数量相同。

如果您只想渲染一张图表，您可以这样做：

return (
  <div className="grid">
    <Chart {...this.props} key={0} i={0} />
  </div>
)

或者如果您要呈现不同数据的许多不同图表，您需要将图表数组包装在另一个数组中。

我可能会更具体一些，请参阅下面的示例稍微调整您的设置

数据

const charts = [
  {
    name: 'Graph 1',
    data: [
      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
    ]
  },
];

然后是 ChartsGrid

export default class ChartsGrid extends React.Component{

  render() {

    return (
      <div className="grid">
        {this.props.charts.map((chart, i) => <Chart key={i} chart={chart} />)}
      </div>
    )
  }
};

单图

export default class Chart extends React.Component {

  render () {
    const { chart } = this.props;
    return (
      <LineChart width={600} height={300} data={chart.data}
        margin={{top: 5, right: 30, left: 20, bottom: 5}}>
        <XAxis dataKey="name"/>
        <YAxis/>
        <CartesianGrid strokeDasharray="3 3"/>
        <Tooltip/>
        <Legend />
        <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    );
  }
};

在 React Components 中模拟数据

Mocking up data in React Components

javascript

mocking

fixtures

ecmascript-6

reactjs