我正在使用 React Javascript。
我正在嘗試將背景線性圖案應用于表格的單元格。目標是使單元格按給定百分比著色，而其余單元格為白色。
函式如下：
const describeColoredSensation = (val,r,g,b,a) => {
const pos = 10 * val;
const def = `rgba(${r},${g},${b},${a}) 0%, rgba(${r},${g},${b},${a}) ${pos}%, rgba(255,255,255,1) ${pos}%, rgba(255,255,255,1) 100%)`
return (
<td
style={{ background: `${def}`}}
>{val}</td>
)
};
該函式被稱為
<tr>
{describeColoredSensation(item.value,253,253,62,255)}
</tr>
示例def變數內容是：
"rgba(253,253,62,255) 0%, rgba(253,253,62,255) 80%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%)"
但是檢查瀏覽器沒有設定背景顏色（背景顏色屬性不存在）。
雖然我只有 4 種不同的顏色，但我不能使用 CSS，因為val變數的值會動態變化。
順便說一句，如果我定義const def = "rgba(255,0,0,255)";它運行正確，則以紅色顯示所有單元格。
另外，如果我def在瀏覽器上的除錯器中復制變數的內容，它會正確顯示。
所以，我認為問題是如何將陳述句消化為 React Javascript。
uj5u.com熱心網友回復：
默認情況下，background僅采用一種顏色。如果你想混合顏色，你應該使用漸變。
請注意，雖然 rgb 顏色通道在范圍內[0,255]，但 alpha 通道僅在范圍內[0,1]。
const describeColoredSensation = (val, r, g, b, a) => {
const pos = 10 * val;
const def = `linear-gradient(to right, rgba(${r},${g},${b},${a}) 0%, rgba(${r},${g},${b},${a}) ${pos}%, rgba(255,255,255,1) ${pos}%, rgba(255,255,255,1) 100%)`;
return <td style={{ background: def }}>{val}</td>;
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/334455.html
標籤：javascript css 反应
上一篇：React通過使用useState的功能變體來防止重新渲染
下一篇：提交表單時無法獲取欄位的默認值