如何使用 for 循环向 React 组件添加样式答案

【问题标题】：How to add styles to React Component with a for loop如何使用 for 循环向 React 组件添加样式
【发布时间】：2019-02-14 12:11:40
【问题描述】：

我想设置每个 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 组件，因为它位于同级节点树中。

提前致谢！

【问题讨论】：

使用 .map 函数返回不同样式或 props 的 jsx 组件
看起来你这样做的方式有点不对劲。您不需要访问 dom 作为单击处理程序的一部分来更改您的反应组件，您希望单击事件来更改组件 state 并将该更改作为更新的道具转到子组件

标签： javascript reactjs styling

【解决方案1】：

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

link

【讨论】：