时间戳

首页 > 解决方案 > 在 React 中的 JSX 中的地图循环中设置元素的样式属性

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

问题描述

再会

我正忙于自学 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>
    ))

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

标签： reactjsjsx

解决方案

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

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

推荐阅读