Question

我正在尝试将props中的颜色用于线性渐变，像这样的东西

const minColor = this.props.data.myresources ? this.props.data.myresources['min'].color : this.props.data.gradeColor;
const maxColor = this.props.data.myresources ? this.props.data.myresources['max'].color : this.props.data.gradeColor;

<div className="filler"
    style={{
    width: `${this.props.data.maxGrd}%`,
    backgroundImage: 'linear-gradient(to right, `${minColor}`,`${maxColor})'
}}>
</div>

它显示一个没有颜色的空条，当我在const中获取颜色值时，有什么方法可以实现吗？

Answer 1

在两种情况下您错了， 1.根据react使用适当的渐变样式语法，例如：

替换

'linear-gradient(to right, `${minColor}`,`${maxColor})'

通过

`linear-gradient(to right, ${minColor} , ${maxColor})`

您未提供div的高度，因此未显示任何内容。或者，您可以在div内提供文本，然后它将根据div内的文本自动获取div的高度。

我在此处附加了一个代码沙箱链接，这是一个有效的示例，您可以在其中识别错误。

Link to see working example

在反应中使用线性梯度的props值

1 个答案: