Javascript 在映射函数中设置特定于元素的css

我在react应用程序中使用MapJavaScript函数多次渲染div。我想设置每个元素的css（宽度）。宽度将是特定于元素的。我是这样渲染div的

    {this.props.face_clicked_reducer.person_timeline.map((item, i) => (
             <div className= {`marker-item-${i}`} id="sele1"></div>
          ))
    }

this.props.face_clicked_reducer.person_timeline.map((item, i) => (
            $("<div className= {`marker-item-${i}`}></div>").css({
                "width": ((item.endTime - item.startTime) * (100/this.props.player_time_update_reducer.video_duration)) + '%',
                "left": ((item.endTime) * (100/this.props.player_time_update_reducer.video_duration)) + '%'
            })

    )).css('backgorund', 'red')

{this.props.face\u clicked\u reducer.person\u timeline.map（（项目，i）=>(
))
}

每个div的类名是不同的。如何设置每个元素的css。对于设置宽度，我需要{item.time}引用

我试着像这样在componentDidMount中设置它

    {this.props.face_clicked_reducer.person_timeline.map((item, i) => (
             <div className= {`marker-item-${i}`} id="sele1"></div>
          ))
    }

this.props.face_clicked_reducer.person_timeline.map((item, i) => (
            $("<div className= {`marker-item-${i}`}></div>").css({
                "width": ((item.endTime - item.startTime) * (100/this.props.player_time_update_reducer.video_duration)) + '%',
                "left": ((item.endTime) * (100/this.props.player_time_update_reducer.video_duration)) + '%'
            })

    )).css('backgorund', 'red')

this.props.face\u clicked\u reducer.person\u timeline.map（（项目，i）=>(
$（“”）.css({
“宽度”：（（item.endTime-item.startTime）*（100/this.props.player\u time\u update\u reducer.video\u duration））+'%，
“左”：（（item.endTime）*（100/this.props.player\u time\u update\u reducer.video\u duration））+“%”
})
)).css（'backgorund'，'red'）

---

但它不起作用。我在控制台中没有收到任何错误

您可以使用

style

prop设置组件的样式

{
    this.props.face_clicked_reducer.person_timeline.map((item, i) => {
        const style = {
            width: ((window.innerWidth * 0.2) * i),
            height: ((window.innerHeight * 0.2) * item.time)
        }
        return (<div className={`marker-item-${i}`} style={style}></div>)
    })
}

{
this.props.face\u clicked\u reducer.person\u timeline.map（（项目，i）=>{
常量样式={
宽度：（（窗内宽度*0.2）*i），
高度：（（window.innerHeight*0.2）*项目时间）
}
返回（）
})
}

您的代码存在一些问题：

您对数组中的每个项使用相同的

id

。ID必须是唯一的

css类的思想是选择多个相似的元素，而不是为每个元素都有一个唯一的类

如果在数组中重新排列项目，则移动项目的css类将更改

---

也就是说，您可以应用内嵌样式：

this.props.face_clicked_reducer.person_timeline.map(
  (item, i) => <div style={{width: (50 * i) + "%", height:(20 * item.time) + "%"}}></div>
);

this.props.face\u单击了\u reducer.person\u timeline.map(
（项目i）=>
);

或者：

this.props.face_clicked_reducer.person_timeline.map(
  (item, i) => {
    let s = {
      width: (50 * i) + "%",
      height: (20 * item.time) + "%"
    };
    return <div style={s}></div>;
  }
);

this.props.face\u单击了\u reducer.person\u timeline.map(
（项目i）=>{
让我们={
宽度：（50*i）+“%”，
高度：（20*项目时间）+“%
};
返回；
}
);

---

这会阻止您在css中定义

person\u timeline.length

类数。

我需要百分比值。我不确定style属性是否可以以百分比为单位设置维度。您可以使用

window.innerWidth

和

window.innerHeight

并计算所需的百分比。提示：请避免将jquery与React一起使用。React不知道在React之外对DOM所做的更改。它根据自己的内部表示确定更新，如果相同的DOM节点被另一个库操作，React会变得混乱，无法恢复。有一些方法可以让你使用其他插件（比如jqeury），但我个人不喜欢或不推荐它。@RaghavGarg我想你的意思是“避免”。我同意，但很多库只是在jquery中，为了让网页看起来更好，我最终使用了jquery。@bennygenel，谢谢你的注意。@RaghavGarg，虽然不能以OP代码中演示的方式使用jQuery（因为它返回的是DOM元素，而不是ReactComponent），但使用React的jQuery有许多有效的用例。例如动画或内嵌样式。即使某些DOM操作也可以在没有“臭代码”的情况下完成。