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

Question

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

我已经尝试过

数据对象位于 map 函数下方，正在使用该对象“tableData”的子集。在渲染中我还尝试插入一个名为“tableStyleCol1”的变量

  {
    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