javascript - 同时映射两个数组并传递给一个 React 组件

Question

我正在创建一个排序可视化工具，它将跟踪排序算法的所有步骤。

const initializeTrace = (arr) =>
{
    let newState = Array(arr.length).fill(0);

    return [
        {
            array: [...arr],
            states: [...newState],
        }
    ];
};

const addToTrace = (trace, currArr, currStates) =>
{
    let tmpArr = [...currArr];
    let tmpState = [...currStates];

    trace.push(
        {
            array: tmpArr,
            states: tmpState,
        }
    )
};

然后，我将跟踪并将其映射到排序可视化器的条形图上。

    return (
        <div onClick={this.onClick} style={{display: 'flex', alignItems: 'flex-end'}}>


            {trace[this.state.traceStep].array.map((el, index) => (
                <Bar key={index} height={el}/>
            ))}
        </div>
    )

对象中第一个索引的示例：

{
    "array": [
        15,
        32,
        10,
        11,
        29,
        20,
        7,
        49,
        11,
        21
    ],
    "states": [
        1,
        2,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ]
}

现在我正在传递会影响条形高度的值。我也想传递状态，这将帮助我确定跟踪期间条的颜色。有没有更好的方法将此信息传递给 Bar 组件。例如，对于第一个栏，我想传递高度为 15，状态为 1。第二，32，2。谢谢！

标签： javascriptarraysreactjs