将道具从父组件传递到子组件以控制图表中的背景颜色

问题描述

我正在使用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，并且它们都具有不同的颜色，而背景色根本不起作用。为什么会发生这种情况以及如何解决？有什么想法吗？

这也是codesandBox的链接，您可以在其中找到项目： https://codesandbox.io/s/modern-cache-m1xln?file=/src/App.js:0-1751

谢谢。

解决方法

问题出在渐变定义的id：id =“ colorUv”中，您应该在道具中传递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