Reactjs 如何从数组生成表？

我有以下格式的数据：

data = [{synonyms: [apple, pie, cookie], value: "taste"},
        {synonyms: [apple, pie, cookie], value: "taste"},
        {synonyms: [apple, pie, cookie], value: "taste"}]

我需要生成以值作为列名、以同义词作为列的表。

通过对数据使用

map（）

可以将值传递给表。这是有效的解决办法

类应用程序扩展了React.Component{
render（）{
让数据=[
{同义词：[“苹果”、“馅饼”、“饼干”]，值：“味道”}，
{同义词：[“苹果”、“馅饼”、“饼干”]，值：“味道”}，
{同义词：[“苹果”、“馅饼”、“饼干”]，值：“味道”}
];
返回(
{data.map（（项目，索引）=>{
返回(
{item.value}
{item.synonyms.map（（syn，index）=>{
返回{syn}；
})}
);
})}
);
}
}
ReactDOM.render（，document.getElementById（'root'））
表格{
显示：表格；
边界塌陷：塌陷；
边框：1px纯黑；
}
表tr{
显示：表格单元格；
边框：1px纯黑；
}
表tr td{
显示：块；
}
我看到一个答案贴在了我的前面。但是有几个输入总是好的


代码转储：

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
常数数据=[
{同义词：[“苹果”、“馅饼”、“饼干”]，值：“味道”}，
{同义词：[“苹果”、“馅饼”、“饼干”]，值：“味道”}，
{同义词：[“苹果”、“馅饼”、“饼干”]，值：“味道”}
];
函数App（）{
常量renderTableHeader=（）=>{
const headers=data.map（entry=>entry.value）；
返回headers.map（header=>{header}）；
};
常量renderTableContent=（）=>{
const contents=data.map（entry=>entry.synonyms）；
返回contents.map（content=>(
{content.map（同义词=>(
{同义词}
))}
));
};
返回(
{renderTableHeader（）}
{renderTableContent（）}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
你能更好地解释一下这个表的结构吗？@Jezpoz我需要这样的表@Jezpoz数组“sinonims”和任何{}部分中可以有任意数量的元素。这是一个很好的答案，但我觉得@Jezpoz做了一个更有条理、更干净的表