#javascript #reactjs #ecmascript-6 #mapping
#javascript #reactjs #ecmascript-6 #отображение
Вопрос:
Я пытаюсь сопоставить реквизиты, переданные функциональному компоненту, который принимает заголовки реквизитов (массив заголовков) и данные (массив объектов) в таблицу. У меня есть нефункциональный код:
export default function DenseTable(props) {
const classes = useStyles();
return (
<div className={classes.table}>
<TableContainer component={Paper}>
<Table className={classes.table} size="small" aria-label="a dense table">
<TableHead>
<TableRow>
{props.headers.map(header => <TableCell align="left" >{header}</TableCell>)}
</TableRow>
</TableHead>
<TableBody>
{props.data.map((dataElement) => (
<TableRow key={dataElement.symbol}>
{Object.keys(dataElement).map(columnValue => <TableCell align="left" >{columnValue}</TableCell>)}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
}
Заголовки заполняются идеально, однако я не уверен, как правильно вложить сопоставление, чтобы я мог получить значения столбцов dataElement, используя заголовки, отображаемые в качестве значений доступа к свойствам. Любая помощь будет с благодарностью!