父子-传参

步骤一：创建父组件

首先，我们创建一个父组件，它将负责渲染图表组件并传递数据给它。

// ParentComponent.jsx

import React, { useState } from 'react';
import ChartComponent from './ChartComponent';

const ParentComponent = () => {
  // 假设这里有一些数据，可以是从API获取或者硬编码的数据
  const [chartData, setChartData] = useState([
    { name: 'A', value: 10 },
    { name: 'B', value: 20 },
    { name: 'C', value: 30 },
    { name: 'D', value: 40 },
    { name: 'E', value: 50 }
  ]);

  return (
    <div>
      <h2>Parent Component</h2>
      <ChartComponent data={chartData} />
    </div>
  );
}

export default ParentComponent;

在这个例子中，ParentComponent 组件中定义了一个 chartData 状态，它是一个包含图表数据的数组。然后，将 chartData 作为 data 属性传递给 ChartComponent。

步骤二：创建子组件

接下来，我们创建 ChartComponent 子组件，它将接收父组件传递的数据并用于展示图表。

// ChartComponent.jsx

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const ChartComponent = ({ data }) => {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="value" fill="#8884d8" />
      </BarChart>
    </ResponsiveContainer>
  );
}

export default ChartComponent;

在这个子组件中，我们使用了 recharts 库来绘制一个简单的柱状图。ChartComponent 接收 data 属性作为参数，并将其传递给 BarChart 组件来展示数据。

步骤三：在应用中使用父组件

最后，将 ParentComponent 和 ChartComponent 集成到应用中的某个位置。

jsx
// App.jsx

import React from 'react';
import ParentComponent from './ParentComponent';

const App = () => {
  return (
    <div className="App">
      <h1>React Chart Example</h1>
      <ParentComponent />
    </div>
  );
}

export default App;

在这个例子中，ParentComponent 被渲染在 App 组件中，从而显示整个图表的结构。

结论

通过这个简单的示例，你可以看到如何在React中实现父子组件之间的参数传递，特别是用于展示图表数据。父组件通过props将数据传递给子组件，子组件根据这些数据来渲染相应的图表内容。这种模式在React应用的数据可视化和复杂UI组件中非常常见和实用。