IT技术 - 如何更改数组中特定元素的颜色 - 吾爱随笔录

如何更改数组中特定元素的颜色

IT技术 javascript reactjs

2021-04-28 13:22:14

我正在尝试使用 React 构建一个排序可视化工具。现在，我正在实施 BubbleSort。该程序如下所示：

这是代码：

class Sorter extends Component {

    state = {
        array: [100,4,214,55,11,22,10,33],
        color: "blueviolet",
    } 

    bubblesorter = async () => {
        let arr = this.state.array
        var len = arr.length,
        i, j, stop;
            for (i=0; i < len; i++){
                    for (j=0, stop=len-i; j < stop; j++){
                        if (arr[j] > arr[j+1]){
                            swap(arr, j, j+1);
                        } 
                        await new Promise(resolve => setTimeout(resolve, 100));
                        this.setState({array:arr})
                    }
                }   
    }

    render() {
        const array = this.state.array
        return (
            <div>
                <h1>This is a sorter</h1>
                <div className="container">
                    {array.map((value, id) => (
                        <span>
                            <div className="bar" key={id} style={{height: value+"px", backgroundColor: this.state.color}}  >
                            </div>
                        </span>
                    ))}
                </div>
                <button onClick={this.bubblesorter}>Sort</button>
            </div>
        )
    }

排序功能正常工作。但我想更改条形的颜色（正在比较的数组元素）。有人可以帮助使用可用于实现此功能的逻辑...谢谢

2个回答

您可以制作colors数组并更新仅更改的颜色。

class Sorter extends Component {
    state = {
        array: [100, 4, 214, 55, 11, 22, 10, 33],
        colors: Array(8).fill('blueviolet'),  // Array of colors for each bar
    };

    bubblesorter = async () => {
        ...
                await new Promise((resolve) => setTimeout(resolve, 100));
                
                // Set different item's color as `red`
                const colors = arr.map((item, index) => (this.state.array[index] === item ? 'blueviolet' : 'red'));
                this.setState({ array: arr, colors });
            }
        }
    };

    render() {
        const { array, colors } = this.state;
        return (
            <div>
                <h1>This is a sorter</h1>
                <div className='container'>
                    {array.map((value, id) => (
                        <span>
                            <div
                                className='bar'
                                key={id}
                                // <- Use the color at the same index of the item
                                style={{ height: value + 'px', backgroundColor: colors[id] }}
                            ></div>
                        </span>
                    ))}
                </div>
                <button onClick={this.bubblesorter}>Sort</button>
            </div>
        );
    }
}

试过了……它有效，但可以使用现代 javascript 改进（不太熟悉，欢迎提出建议）

class Sorter extends Component {

    state = {
        array: [],
        colors: Array(8).fill('blueviolet'),
    } 
    bubblesorter = async () => {
    ...
                        await new Promise(resolve => setTimeout(resolve, 1000));
                        const colors = []
                        for (let k=0; k<8; k++) {
                            let color = k==j || k==j+1 ? 'red':'blueviolet'
                            colors[k] = color
                        }
                        // console.log(colors)
                        this.setState({ array: arr, colors: colors });
             
              }
      }
      render() 
      {
        // const array = this.state.array
        const { array, colors } = this.state;
        // console.log(array)
        return (
            <div>
                <h1>This is a sorter</h1>
                <div className="container">
                    {array.map((value, id) => (
                        <span>
                            <div 
                                className="bar" 
                                key={id} 
                                style={{ height: value + 'px', backgroundColor: colors[id] 
                             }} >
                            </div>
                            {/* <span>{value}</span> */}
                        </span>
                    ))}
                </div>
                <button onClick={this.bubblesorter}>Sort</button>
            </div>
        )
    }
}

其它你可能感兴趣的问题

上一篇React Context API 的 Jest & Enzyme 测试错误下一篇如何修复此 npm start 不起作用（在 npx create-react-app 之后）