我想让它发挥作用:
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>
);
}
}
在您的解决方案中,map
和return
中的括号末尾也在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>
);
}
}