Question

美好的一天

我正忙于自学React在我最近担任的新职位。我有一个关于语法的愚蠢问题，不确定如何使用Google。

下面的代码来自我在学习中试图提供帮助的项目。我已经掌握了广泛的技巧，因为我有大量的JavaScript经验。

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

到目前为止，根据我的研究，您需要先构建用于样式标签的对象，然后才能在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>
    ))

如果有人可以帮助我了解我要去哪里，我将非常感激。

Answer 1

要在React中设置样式，您需要将其用双弯括号括起来，并且样式必须正确

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

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

1 个答案: