【发布时间】：2020-03-27 05:41:20
【问题描述】：
我有一个组件，我在其中渲染 SVG 路径和通过父组件从静态数据提供的 linearGradient 值。这些属性称为“startColor”和“stopColor”，主要用于渐变的开始和停止颜色。
当我控制台记录每个对象的值时，它们是正确的，但是它们没有按预期呈现。请注意 dataTwo 对象的值是不同的。
我怀疑在渲染第一个对象的第一个值是所有组件都使用的值。我已经对此进行了测试，似乎是这样。
如何让每个圆圈呈现数据中提供的正确渐变颜色？
数据结构：
const dataOne = [
{
title: 'Cpu utilisation',
graph: 65,
noBorder: false,
noMargin: false,
startColor: '#2DC0FF',
stopColor: '#0160B2'
},
{
title: 'Memory utilisation',
graph: 65,
noBorder: true,
noMargin: true,
startColor: '#2DC0FF',
stopColor: '#0160B2'
},
]
const dataTwo = [
{
title: 'Warnings today',
graph: 65,
noBorder: false,
noMargin: false,
startColor: '#fa9100',
stopColor: '#ffc14f'
},
{
title: 'Errors today',
graph: 65,
noBorder: true,
noMargin: true,
startColor: '#fa9100',
stopColor: '#ffc14f'
},
]
组件用法：
<div className="tab-info-body large">
<DoubleGraph data={dataOne} />
</div>
<div className="tab-info-body large">
<DoubleGraph data={dataTwo} />
</div>
组件代码：
render() {
const { data, title, startColor, stopColor } = this.props;
const { value, valueOne, valueTwo, hidden, visible, valueOneYPos, valueTwoYPos, valueOneHidden, valueTwoHidden, dashArray, dashArrayBorder } = this.state;
const styleOne = { transform: `translate(0px, ${valueOneYPos}px)` };
const styleTwo = { transform: `translate(0px, ${valueTwoYPos}px)` };
return (
<div className="double-graph-wrap">
<div className="flex">
{data.map((item, i) => {
console.log("give me colour", item.startColor)
return (
<div className={classNames('wrap', { noBorder: item.noBorder, noMargin: item.noMargin})}>
{i === 1 &&<div className="border-test"></div>}
<span className="title">{item.title}</span>
<div className="graph-wrap">
<div className="graph">
<div className="value-wrap">
<div className="values">
<span style={styleOne} className={classNames("valueOne", {hidden: valueOneHidden})}>{valueOne}</span>
<span style={styleTwo} className={classNames("valueTwo", {hidden: valueTwoHidden})}>{valueTwo}</span>
</div>
</div>
<div class="single-chart">
<div style={{ background: 'black', width: 100, height: 100}}>{item.startColor}</div>
<svg viewBox="0 0 36 36" class="circular-chart orange">
<defs>
<linearGradient id='grad'>
<stop stop-color={item.startColor} />
<stop offset='100%' stop-color={item.stopColor} />
</linearGradient>
</defs>
<path class="circle-bg"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="borderTwo"
stroke-dasharray={dashArrayBorder}
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="circle"
stroke-dasharray={dashArray}
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="borderOne"
stroke-dasharray="1, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="average"
stroke-dasharray="1, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831"
/>
</svg>
</div>
</div>
</div>
</div>
)
})}
</div>
</div>
)
}
【问题讨论】：
-
使用唯一的 id 值而不是硬编码 id='grad'
-
非常感谢，我在数据对象中添加了一个 id，监听了 id 并根据 ID 更改了父 className 以呈现正确的笔画。再次感谢！
标签： javascript css reactjs svg linear-gradients