如何使用for循环向React Component添加样式

Question

我想相对于数组中的索引设置每个React组件的顶部样式，但是，我不确定如何正确访问和设置属性。我将使用状态来设置它们，但是，包含我要操作的元素的节点是我正在编辑的节点中同级节点的子节点。有什么有效的方法吗？

handleClick3D() {
    document.getElementById('portfolio').classList.replace('portfolio-2d', 'portfolio-3d');
    var elems = document.querySelectorAll('.portfolio-item');
    for (var i = 0; i < elems.length; i++) {
        var zIndex = 0 + i;
        elems[i].zIndex = zIndex;
        elems[i].firstChild.src = items[i].imgSec;
        elems[i].style.top = 0 - (i * 300);
    }
}

'portfolio-item'类应用于每个元素，我以这种方式选择每个元素，因为我认为我无法访问实际的React组件，因为它位于同级节点树中。

谢谢！

Answer 1

使用.map函数并返回具有不同样式或道具的jsx组件

link