如何在JSX中的循环内部进行渲染



我想让它发挥作用:

import React from 'react';
export default class HelloWorld extends React.Component {
public render(): JSX.Element {
let elements = {"0": "aaaaa"};
return (
<table>
<thead>
<td>Elements</td>
<td>Contenu</td>
</thead>
<tbody>
{Object.values(elements).map((element, index => {
<span>
{element.value}
</span>
})}
</tbody>
</table>
);
}
}

我想在对象中进行渲染。在渲染中输入循环

export default class HelloWorld extends React.Component {
public render(): JSX.Element {
let elements = {"0": "aaaaa"};
return (
<table>
<thead>
<td>Elements</td>
<td>Contenu</td>
</thead>
<tbody>
{Object.values(elements).map((element, index) => {
return <span>
{element}
</span>
})}
</tbody>
</table>
);
}
}

在您的解决方案中,mapreturn中的括号末尾也在map中缺失

您可以使用object.values(your_object(将对象值转换为数组,然后通过map方法映射抛出数组。

您想要映射对象elements的值,但放弃对每个元素的.value查找,因为这将是未定义的。

export default class HelloWorld extends React.Component {
public render(): JSX.Element {
let elements = {"0": "aaaaa"};
return (
<table>
<thead>
<td>Elements</td>
<td>Contenu</td>
</thead>
<tbody>
{Object.values(elements).map((element, index) => (
<span>
{element}
</span>
))}
</tbody>
</table>
);
}
}

还需要指出的是,Object并不是存储数据列表的最佳方式,Array会简单得多。像这样:

export default class HelloWorld extends React.Component {
public render(): JSX.Element {
const elements = [
'aaa',
'bbb',
'ccc'
];
return (
<table>
<thead>
<td>Elements</td>
<td>Contenu</td>
</thead>
<tbody>
{elements.map((element, index) => (
<span>
{element}
</span>
))}
</tbody>
</table>
);
}
}

相关内容

  • 没有找到相关文章

最新更新