Javascript 模板渲染函数 returns 未定义
Javascript Template render function returns undefined
我的渲染函数 returns 未定义 数据中的每个圆。
我有可变数量的圆圈,这就是为什么我需要映射所有圆圈。
这是调用渲染函数的正确方法吗?
我怎样才能正确返回圆圈?
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"
}
]
}
]
}
您不能将模板文字相互嵌套,因为反引号会相互干扰。最好的办法是将 d.g.map((entry)=> { ... })
抽象为一个单独的函数,然后在模板文字中调用该函数。
此外,在您的 render()
函数中,您没有 return 合并数组。它会 return 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>
我的渲染函数 returns 未定义 数据中的每个圆。
我有可变数量的圆圈,这就是为什么我需要映射所有圆圈。
这是调用渲染函数的正确方法吗?
我怎样才能正确返回圆圈?
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"
}
]
}
]
}
您不能将模板文字相互嵌套,因为反引号会相互干扰。最好的办法是将 d.g.map((entry)=> { ... })
抽象为一个单独的函数,然后在模板文字中调用该函数。
此外,在您的 render()
函数中,您没有 return 合并数组。它会 return 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>