当前位置: 首页 > 知识库问答 >
问题:

如何用for循环为React组件添加样式

赵钊
2023-03-14

我想设置每个React组件相对于它在数组中的索引的顶部样式,但是,我不确定如何正确地访问和设置属性。我将使用state设置它们,但是,包含我要操作的元素的节点是来自我正在编辑的节点的兄弟节点的子节点。有什么办法能有效地做到这一点吗?

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);
    }
}

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

提前道谢!

共有1个答案

归星驰
2023-03-14

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

链接

 类似资料:
  • 我在mysql数据库中有一个数组数据,我想在使用Ajax得到结果后,用for循环逐个显示出来。过程是这样的。 这是将呈现每个项的段落 null 当我尝试使用for循环时,它会说语法错误,意外的for循环被取走,我该如何解决这个问题,例如,这里我使用sample for循环来使事情尽可能简单。

  • 如果我在问这个问题时犯了任何错误,我会提前道歉。我不熟悉stackoverflow和java。 我的问题是,我希望能够将一个普通的double数组转换为arraylist,我需要对这个arraylist元素进行操作,以便将值从x更改为-x(使用接口) 我正试图首先使用for循环元素逐个元素将数组double转换为arraylist(我认为应该先得到它),但.add似乎不起作用,这是我研究它时出现的

  • 我试图理解数组加法CoderByte问题的解决方案中的逻辑。这是问题提示——“使用JavaScript语言,让函数ArrayAdditionI(arr)获取存储在arr中的数字数组并返回字符串true,如果数组中的任何数字组合可以加到等于数组中的最大数字,否则返回字符串false。例如:如果arr包含[4, 6, 23, 10, 1, 3],则输出应该返回true,因为4 6 10 3 = 23。

  • 我是相当新的Reactor(Spring5 WebClient),虽然我已经想出了如何做简单的请求和处理它的输出与地图或平面图,我现在需要做一个有点困难的任务: 我有一个无法改变的终点。 这个endpoint调用的基本签名是Get

  • 我有一个JPanel、窗口和一组JPanel和JLabel。我想在JFrame中添加5个JPanel,在每个JPanel中添加一个JLabel。每个JPanel将用于表示有关骰子的数据。 但是,当我运行代码时,只有最后一个JPanel出现在JFrame上,并带有文本“Dice 4”。我不明白为什么。 守则: