在 React 中的 JSX 中的地图循环中设置元素的样式属性答案

【问题标题】：Set style property of elements in a map loop in JSX in React在 React 中的 JSX 中的地图循环中设置元素的样式属性
【发布时间】：2019-10-23 14:46:24
【问题描述】：

美好的一天

我正忙于自学 React 以应对我最近开始的新职位。我有一个关于语法的愚蠢问题，我不确定如何用谷歌搜索。

以下代码来自我在学习时尝试帮助的一个项目。由于我有相当多的 JavaScript 经验，所以我已经设法理解了大致的笔画。

我正在尝试根据从数组中的对象获取的 x 和 y 值在地图上渲染的图形分配顶部和左侧值，我正在使用 map 命令循环遍历该数组。

根据我目前的研究，您需要先构建用于样式标签的对象，然后才能在 JSX 中使用它。我只能访问我在循环内循环的对象中的值，并且正在努力将这些值读入我用于样式的预先存在的对象中。

具有默认顶部和左侧值的先前定义的对象

constructor(props) {
    super(props);
    this.chartStyle = { top: "15px", left: "15px" }
  }

我需要根据对象数据更改“this.chartStyle”的地图循环

this.props.data.data.map((d, i) => (
   <div key={"key"+i} style={this.chartStyle}>
       ...
   </div>
))

我尝试过动态创建一个对象，或者更改循环内的变量，但是我遇到了编译器错误，所以我显然是在错误的地方做的。

    this.props.data.data.map((d, i) => (
       <div key={"key"+i} style={top: d.y+"px, left: d.x}>
           ...
       </div>
    ))
...
    this.props.data.data.map((d, i) => (
       {this.chartStyle = {top: d.y+"px, left: d.x}}
       <div key={"key"+i} style={this.chartStyle}>
           ...
       </div>
    ))

如果有人能帮助我了解我哪里出错了，我将不胜感激。

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

要在 React 中设置样式，您需要用双曲括号将其覆盖，并且样式必须正确

    this.props.data.data.map((d, i) => (
   <div key={"key"+i} style={{top: d.y+"px", left: d.x+"px"}}>
       ...
   </div>
))

【讨论】：