使用Map渲染时，如何使用渲染数据对象外部的变量

Question

我想在JSX中渲染一些数据，其中包括一些不在我用于渲染的数据中的变量。我不确定我想要的结果的最佳方法。

我尝试了什么

该数据对象位于映射函数下方，使用该对象的子集"tableData"。在渲染中，我还试图插入一个名为"tableStyleCl1"的变量

{
id: 6,
sectionName: 'Table: My Info',
article: (
<Fragment>
<h1>This is a funky table2</h1>
</Fragment>
),
tableStyleCol1:'1',
tableStyleCol2:'3',
tableData:
[
{c1:'Hospital Number',c2:'exaMPLE - WRITE HERE'},
{c1:' Existing Medical conditions',c2:''}
],
tableType:'TableTwoColum'
},

我用于渲染的代码在这里

render() {
const sectionNumber = this.props.sectionNumber;
const currentData = this.props.data[sectionNumber]
const elementsRender = currentData.tableData.map(elements => {
return (
<div className='container-flex-row border-lightgray'>
<div className={'table-side-header gray container-flex-grow-'+this.currentData.tableStyleCol1}>
{elements.c1}
</div>
<div></div>
</div>
);
});
return <h1>{elementsRender}</h1>;
}

Answer 1

不要使用this.currentData.tableStyleCol1。只需简单地使用currentData.tableStyleCol1