Javascript模板渲染函数返回未定义

Question

我的渲染函数为数据中的每个圆圈返回未定义。
我有不同数量的圆圈，这就是为什么我需要映射所有圆圈。
这是调用渲染函数的正确方法吗？
我怎样才能实现正确返回圆圈？

JS

const d = data;

document.getElementById("gElement").innerHTML = `

    ${d.g.map((entry)=> {
        console.log(entry);

        return `
        <g class="${entry.class}" id="${entry.id}">

        <polygon 
           $points ="${entry.polygon.points}">
        </polygon>

        ${render(entry.circle)}

        </g>`
    }).join('')}`

    function render(circ){  
       `${circ.map((entry) =>{

            return`
            <circle
                cx = "${entry.cx}"
                cy = "${entry.cy}"
                r  = "${entry.r}"
                fill = "${entry.fill}">
            </circle>`

        }).join('')}`
    }  

data.json

 {
    "id": "gElement",
    "g": [
        {
            "class": "polygon",
            "id": "elements100",
            "polygon": {
                "points": "337,212.00000000000006,352.99999999999994,150,433.99999999999994,147.00000000000006,431,206.00000000000006"
            },
            "circle": [
                {
                    "cx": "337",
                    "cy": "212.00000000000006",
                    "r": "2",
                    "fill": "none"
                },
                {
                    "cx": "352.99999999999994",
                    "cy": "150",
                    "r": "2",
                    "fill": "none"
                },
                {
                    "cx": "433.99999999999994",
                    "cy": "147.00000000000006",
                    "r": "2",
                    "fill": "none"
                },
                {
                    "cx": "431",
                    "cy": "206.00000000000006",
                    "r": "2",
                    "fill": "none"
                }
            ]
         }
      ]
   }

Answer 1

您不能将模板文字相互嵌套，因为反引号会相互干扰。最好的办法是将d.g.map((entry)=> { ... }) 抽象为一个单独的函数，然后在模板文字中调用该函数。

此外，在您的 render() 函数中，您不会返回连接的数组。它将返回undefined，您的圈子将永远不会被注入到您的 HTML 中。以下脚本应该可以工作：

document.getElementById("gElement").innerHTML = getParsedHtml(d);

    function getParsedHtml(data) {
      return data.g.map(entry => {
        return `
              <g class="${entry.class}" id="${entry.id}">

              <polygon 
                 points ="${entry.polygon.points}">
              </polygon>

              ${render(entry.circle)}

              </g>`;
       }).join('');
    }

    function render(circ) {
      return circ.map(entry => {
        return `
          <circle
              cx="${entry.cx}"
              cy="${entry.cy}"
              r="${entry.r}"
              fill="${entry.fill}">
          </circle>`;
      }).join('');
    }

我注意到您在多边形的 points 属性中有一个 $ 前缀：我想这是一个错字？

请参阅下面的概念验证示例：

const d = {
  "id": "gElement",
  "g": [{
    "class": "polygon",
    "id": "elements100",
    "polygon": {
      "points": "337,212.00000000000006,352.99999999999994,150,433.99999999999994,147.00000000000006,431,206.00000000000006"
    },
    "circle": [{
        "cx": "337",
        "cy": "212.00000000000006",
        "r": "2",
        "fill": "none"
      },
      {
        "cx": "352.99999999999994",
        "cy": "150",
        "r": "2",
        "fill": "none"
      },
      {
        "cx": "433.99999999999994",
        "cy": "147.00000000000006",
        "r": "2",
        "fill": "none"
      },
      {
        "cx": "431",
        "cy": "206.00000000000006",
        "r": "2",
        "fill": "none"
      }
    ]
  }]
};

document.getElementById("gElement").innerHTML = getParsedHtml(d);

function getParsedHtml(data) {
  return data.g.map(entry => {
    return `
          <g class="${entry.class}" id="${entry.id}">

          <polygon 
             points ="${entry.polygon.points}">
          </polygon>

          ${render(entry.circle)}

          </g>`;
   }).join('');
}

function render(circ) {
  return circ.map(entry => {
    return `
      <circle
          cx="${entry.cx}"
          cy="${entry.cy}"
          r="${entry.r}"
          fill="${entry.fill}">
      </circle>`;
  }).join('');
}

svg {
  border: 1px solid #000;
  width: 250px;
  height: 250px;
}

polygon {
  fill: grey;
}
circle {
  fill: steelblue;
}

<svg viewBox="0 0 500 500">
  <g id="gElement"></g>
</svg>