javascript - 使用 JSON 数组值设置 css

Question

我有一个 React 类，它从 JSON 对象数组呈现一组 html 元素。对象键设置类名，对象键值设置内部文本。

import React, { Component } from "react";
import "./Maps.css";
import df3 from "./data/df3.json"
import sample from "./data/sample.json"

class Maps extends Component {
  constructor() {
    super();
    const data = df3;
    this.state = data
  }
  renderDiv = () => {
    var df4 = df3["ds"];
    return df4.map(v => {
      return Object.keys(v).map((space) => {
        return (
          <div className={space}>
            {v[space][0]}
          </div>
        );
      });
    });
  };

  render() {
    return <div id="Maps">{this.renderDiv()}</div>;
  }

}

export default Maps

我想做的是返回类似这样的东西，其中样式由对象值设置（例如，缩放 div）：

return (
          <div className={space}
               style={{transform:'scale({v[value][0]},{v[value][0]})'}}>
            {v[space][0]}
          </div>
        );

一如既往，任何帮助表示赞赏。

标签： javascriptcssjsonreactjs

Answer 1

您可以使用字符串文字来形成您的样式：

style={{transform:`scale(${v[value][0]},${v[value][0]})`}}>

更多信息在这里