动态地将列表中项目的背景颜色从深色更改为浅色

Question

I want to change the background of the elements in a list from dark to light.

The number of items in the list is variable. It could be 5, it could be 50.

I can set the default color of the first item.

for example; for example

https://jsfiddle.net/tL25ngrq/1/

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }
  
  render() {
  const min = 1;
  const max = 255;
  const rand = min + Math.random() * (max - min);
  const minColor = 1;
  const maxColor = 255;
  const randColor = minColor + Math.random() * (maxColor - minColor);
  console.log(randColor)
  let rows = [];
  for (let i = 0; i < rand; i++) {
  rows.push(<tr style={{ backgroundColor: `rgb(10, ${randColor * i}, 100)` }} ><td>Test {i}</td></tr>)}
    return (
      <div>
       <table>
        <tr>
         <th>Title</th>
       </tr>
        {rows}
     </table>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

Answer 1

Actually I'd suggest you to use hsv instead of rgb. In hsv, v is represent value, and the lower it is, the darker color will be.

So for example you can take range from 20% (0% is fully black) to 100% and make some calculation over it. You can just divide 80 on number of rows, then for each row set V to rowNumber * (80 / numberOfRows) , I'm not sure how it work with decimal numbers, so you might use Math.floor or something like that to get an integer value.

Hope it helps

Answer 2

Here is an over simplified example, it generates a random color on each run, and combine it with a generated lightness based on the index i of the list to create a color value for each item.

The length of the list is randomly generated, same as the posted code, and the lightness of each item gradually increase (go from dark to light).

The color (Hue), min and max lightness of the list can be customized.

This example runs in the snippet below for convenience, and displays randomized results by running and hiding the snippet.

Hope it will help.

 class TodoApp extends React.Component { constructor(props) { super(props) this.state = { } } render() { // Set the random range for length of list const min = 5; const max = 30; const rand = min + Math.random() * (max - min); // Get a random color (Hue) for first item, or set a fixed one const minColor = 0; const maxColor = 360; const randColor = minColor + Math.floor(Math.random() * (maxColor - minColor)); // Set min and max lightness const minLit = 50; const maxLit = 90; // Since the list go lighter, minLit is also the first item lightness, and maxLit the last item lightness const calcLit = (i) => (Math.floor((i* (maxLit-minLit))/(rand - 1))) + minLit; let rows = []; for (let i = 0; i < rand; i++) { const itemLit = calcLit(i); const backgroundColor = `hsl(${randColor} 100% ${itemLit}%)`; rows.push(<tr style={{backgroundColor}} ><td>{backgroundColor}</td></tr>)} return ( <div> <table> <tr> <th>Title</th> </tr> {rows} </table> </div> ) } } ReactDOM.render(<TodoApp />, document.querySelector('#root'));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>