将父组件的 props 传递给子组件，以控制 recharts 中的背景颜色

Question

我正在使用 Recharts 在我的 React 项目中渲染四个面积图。我有一个单独的文件来渲染一个面积图，然后将其导出到我的主要组件，以使用不同的渐变背景渲染四次。这是我绘制图表的方式：

import React from 'react';
import {
    AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
} from 'recharts';

const ResponsiveAreaContainer = (props) => {

    const { backgroundColor, strokeColor } = props;

    const data = [
        {
            name: 'January', uv: 4000, pv: 2400, amt: 2400,
        },
        {
            name: 'February', uv: 3000, pv: 1398, amt: 2210,
        },
        {
            name: 'March', uv: 2000, pv: 9800, amt: 2290,
        },
        {
            name: 'April', uv: 2780, pv: 3908, amt: 2000,
        },
        {
            name: 'May', uv: 1890, pv: 4800, amt: 2181,
        },
        {
            name: 'June', uv: 2390, pv: 3800, amt: 2500,
        },
        {
            name: 'July', uv: 3490, pv: 4300, amt: 2100,
        },
    ];

    const ResponsiveArea = () => (
        <ResponsiveContainer width="100%" height={200}>
            <AreaChart
                data={data}
                margin={{
                    top: 10, right: 30, left: 0, bottom: 0,
                }}
                fontSize={12}
            >
                <defs>
                    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor={backgroundColor} stopOpacity={0.8} />
                        <stop offset="95%" stopColor={backgroundColor} stopOpacity={0} />
                    </linearGradient>
                </defs>
                <XAxis dataKey="name" axisLine={false} />
                <YAxis axisLine={false} />
                <Tooltip />
                <Area type="linear" strokeWidth={3} dataKey="uv" stroke={strokeColor} fillOpacity={1} fill="url(#colorUv)" />
            </AreaChart>
        </ResponsiveContainer>
    );

    return (<ResponsiveArea />)
}

export default ResponsiveAreaContainer;

而且，这是我的主文件，其中呈现了四个图表：

import React from "react";
import "./styles.css";
import ResponsiveAreaChart from "./areaChart";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="branches-charts-container">
        <div className="branches-charts-wrapper">
          <div className="chart-title-wrapper">
            <h3>Total Sales</h3>
          </div>
          <div className="area-chart-wrapper">
            <ResponsiveAreaChart
              backgroundColor="#8884d8"
              strokeColor="#3749A6"
            />
          </div>
        </div>
        <div className="branches-charts-wrapper">
          <div className="chart-title-wrapper">
            <h3>Completed Orders</h3>
          </div>
          <div className="area-chart-wrapper">
            <ResponsiveAreaChart
              backgroundColor="#89F674"
              strokeColor="#00D50E"
            />
          </div>
        </div>
        <div className="branches-charts-wrapper">
          <div className="chart-title-wrapper">
            <h3>Delayed Orders</h3>
          </div>
          <div className="area-chart-wrapper">
            <ResponsiveAreaChart
              backgroundColor="#FFDA9A"
              strokeColor="#FFBF50"
            />
          </div>
        </div>
        <div className="branches-charts-wrapper">
          <div className="chart-title-wrapper">
            <h3>Delayed Orders</h3>
          </div>
          <div className="area-chart-wrapper">
            <ResponsiveAreaChart
              backgroundColor="#FD9C9C"
              strokeColor="#FC5A5A"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

如您所见，我将两个道具从父组件传递到面积图组件，strokeColor 和 backgroundColor。问题是，当呈现四个图表时，只应用了 strokeColor，它们都有不同的颜色，而背景颜色根本不起作用。为什么会发生这种情况以及如何解决这个问题？有什么想法吗？

这里还有一个 link 到 codesandbox，您可以在那里找到该项目： https://codesandbox.io/s/modern-cache-m1xln?file=/src/App.js:0-1751

提前致谢。

Answer 1

问题出在渐变定义的id：id="colorUv"，你应该在props中传递id来定义动态渐变。你应该这样做：

import React from "react";
import "./styles.css";
import ResponsiveAreaChart from "./areaChart";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="branches-charts-container">
        <div className="branches-charts-wrapper">
          <div className="chart-title-wrapper">
            <h3>Total Sales</h3>
          </div>
          <div className="area-chart-wrapper">
            <ResponsiveAreaChart
              backgroundColor="#8884d8"
              strokeColor="#3749A6"
              id='1'
            />
          </div>
        </div>
        <div className="branches-charts-wrapper">
          <div className="chart-title-wrapper">
            <h3>Completed Orders</h3>
          </div>
          <div className="area-chart-wrapper">
            <ResponsiveAreaChart
              backgroundColor="#89F674"
              strokeColor="#00D50E"
              id='2'
            />
          </div>
        </div>
        <div className="branches-charts-wrapper">
          <div className="chart-title-wrapper">
            <h3>Delayed Orders</h3>
          </div>
          <div className="area-chart-wrapper">
            <ResponsiveAreaChart
              backgroundColor="#FFDA9A"
              strokeColor="#FFBF50"
              id='3'
            />
          </div>
        </div>
        <div className="branches-charts-wrapper">
          <div className="chart-title-wrapper">
            <h3>Delayed Orders</h3>
          </div>
          <div className="area-chart-wrapper">
            <ResponsiveAreaChart
              backgroundColor="#FD9C9C"
              strokeColor="#FC5A5A"
              id='4'
            />
          </div>
        </div>
      </div>
    </div>
  );
}

和

import React from 'react';
import {
    AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
} from 'recharts';

const ResponsiveAreaContainer = (props) => {

    const { backgroundColor, strokeColor,id } = props;

    const data = [
        {
            name: 'January', uv: 4000, pv: 2400, amt: 2400,
        },
        {
            name: 'February', uv: 3000, pv: 1398, amt: 2210,
        },
        {
            name: 'March', uv: 2000, pv: 9800, amt: 2290,
        },
        {
            name: 'April', uv: 2780, pv: 3908, amt: 2000,
        },
        {
            name: 'May', uv: 1890, pv: 4800, amt: 2181,
        },
        {
            name: 'June', uv: 2390, pv: 3800, amt: 2500,
        },
        {
            name: 'July', uv: 3490, pv: 4300, amt: 2100,
        },
    ];
   const backgroundId = `url(#${id})` ;
    const ResponsiveArea = () => (
        <ResponsiveContainer width="100%" height={200}>
            <AreaChart
                data={data}
                margin={{
                    top: 10, right: 30, left: 0, bottom: 0,
                }}
                fontSize={12}
            >
                <defs>
                    <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor={backgroundColor} stopOpacity={0.8} />
                        <stop offset="95%" stopColor={backgroundColor} stopOpacity={0} />
                    </linearGradient>
                </defs>
                <XAxis dataKey="name" axisLine={false} />
                <YAxis axisLine={false} />
                <Tooltip />
                <Area type="linear" strokeWidth={3} dataKey="uv" stroke={strokeColor} fillOpacity={1} fill={backgroundId}/>
            </AreaChart>
        </ResponsiveContainer>
    );

    return (<ResponsiveArea />)
}

export default ResponsiveAreaContainer;

结果如下：https://codesandbox.io/s/crimson-dawn-7vsdc?fontsize=14&hidenavigation=1&theme=dark

将父组件的 props 传递给子组件，以控制 recharts 中的背景颜色

Pass props from a parent component to a child component to control the background color in recharts

reactjs

recharts

react-props