html - 仅当设置为零时才 react 渲染 zindex 样式

Question

我需要根据状态变量为我的组件设置动态 z-index。 但只有当 zindex 设置为 0 时它才有效。

我的数组在下面

images:[
                                    ['img1',false,[1,2,3],1,0],//4th one is zindex
                                    ['img2',false,[2,3,1],2,0],
                                    ['img3',false,[4,5],3,10],
                                    ['img4',false,[1,2,3],4,0],
                                    ['img5',false,[2,3,1],5,0],
                                    ['img6',false,[5],6,0],
                                    ['img7',false,[1,2,3],7,0],
                                    ['img8',false,[2,3,1],8,0],
                                    ['img9',false,[5],9,0],
                                    ['img10',false,[1,2,3],10,0],
                                    ['img11',false,[2],11,10],
                                    ['img12',false,[5],12,10]
                              ],

jsx 片段

{this.state.images.map((im,index) =>
                                    <div className="img-block" style={{'z-index':im[4]}}  draggable="true" onDragStart={this.drag.bind(this,im[3],index)} onDrop={this.drop.bind(this,im[3],index)} onDragOver={this.allowDrop}>
)}

呈现的 HTML 输出

<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true"> //not rendered 10
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" style="z-index: 0;">
<div class="img-block" draggable="true" > //not rendered 10
<div class="img-block" draggable="true" > //not rendered 10

请让我知道我错过了什么

Answer 1

我试过了 running your code in jsFiddle并得到错误

将 z-index 重命名为 zIndex 后，所有元素都被分配了一个。