React - 如何按索引更改类名？

Question

我创建了一个简单的逻辑：当您单击某个块时， classname名会发生变化，但问题是当您单击某个块时， classname名会发生变化，并且块的 rest 看起来像这样

我只需要更改我点击的 class 的名称，我想我需要使用索引，但我不太明白如何重新处理它

export default function SelectGradientTheme(props) {
    const resultsRender = [];
    const [borderColor, setBorderColor] = useState(false);

    const setBorder = () => {
        setBorderColor(!borderColor)
    }

    const borderColorClassName = borderColor ? "selectBorder" : null;

    for (var i = 0; i < GradientThemes.length; i += 3) {
        resultsRender.push(
            <div className={"SelectThemePictures_Separator"}>
                {
                    GradientThemes.slice(i, i + 3).map((col, index) => {
                        return (
                            <div key={index} className={borderColorClassName} onClick={() => props.SideBarPageContent(col)|| setBorder()}>
                            </div>
                        );
                    })
                }
            </div>
        )
    }


    return (
        <div className="SelectThemeWrapper">
            {resultsRender}
        </div>
    );
};

Answer 1

您可以记住所选索引

请参考以下代码：

export default function SelectGradientTheme(props) {
    const resultsRender = [];
    const [selectedIndex, setSelectedIndex] = useState(false);

    const setBorder = (index) => {
        setSelectedIndex(index);
    };

    for (var i = 0; i < GradientThemes.length; i += 3) {
        resultsRender.push(
            <div className={"SelectThemePictures_Separator"}>
                {
                    GradientThemes.slice(i, i + 3).map((col, index) => {
                        return (
                            <div key={index}
                                className={index === selectedIndex ? 'selectBorder' : null}
                                onClick={() => props.SideBarPageContent(col)|| setBorder(index)}>
                            </div>
                        );
                    })
                }
            </div>
        )
    }


    return (
        <div className="SelectThemeWrapper">
            {resultsRender}
        </div>
    );
};