Question

我有一个类似的组件：

...
const STARTING_OPACITY = 0.3;
const STARTING_HEIGHT = ageVariable === 5 ? 70 : 20;
const opacityInterval = (1 - STARTING_OPACITY) / yearlyContr;
const heightInterval = (100 - STARTING_HEIGHT) / yearlyContr;
...

...
return (
    columns.map(
        (column, i) => {
            return(
                <Column height={STARTING_HEIGHT + (heightInterval * getBarsHeight(columns))}  key={`id-${i}`}>
                    <MonthlyContribution>£{column}</MonthlyContribution>
                    <ProgressionBar  
                        opacity={((STARTING_OPACITY + (opacityInterval * i)))}
                    />
                    <AgeContainer>{age + (i * ageVariable)}</AgeContainer>
                </Column>
            );
        }
    )
);
...

，主要功能是：

const isDecreasing = (firstPayment, secondPayment) => firstPayment > secondPayment;

let heightVariable;

const getBarsHeight = arr => {
    const getIsDecreasing = isDecreasing(arr[0], arr[1]);
    const arrLength = arr.length;

    if (getIsDecreasing) {
        for (let i = arrLength; i >= 0; i--) {
            heightVariable = i;
        }
    }
    else {
        for (let i = 0; i < arrLength; i++) {
            heightVariable = i;
        }
    }

    return heightVariable;
}

我想要实现的是，如果我有一个像这样的数组：

[1,2,3]

如果数组如下所示，列组件上的高度道具将逐渐增加，反之亦然：

[3,2,1]

此刻，我始终获得相同的身高道具值。

Answer 1

getBarsHeight需要了解索引，以便为不同索引提供不同的值=> getBarsHeight(columns, i)：

const getBarsHeight = (arr, i) => {
  const isDecreasing = arr[0] > arr[1]
  return isDecreasing ? arr.length - i : i + 1
}

减少/增加循环

1 个答案: