Question

我有一个日期数组。我需要为这些日期制作一个类似于日历的表格。每个单元格都是具有两个按钮的无状态组件，每个按钮将具有一个回调函数，用于修改与给定日期相对应的数据。

表是通过映射由天的数组组成的“父”数组（每个“子数组的长度> = 6，作为日历的目的”）制成的，然后映射每个子数组，从而创建行。

但是，由于每个表行都是通过映射单独的数组构成的，因此通常如何跟踪单元格的数量？我希望每个单元格都具有唯一的索引，尽管它们是由单独的map（）制成的。

我为什么要那样？因为单击每个单元格内的按钮需要修改一些与单元格代表的日期相对应的数据

我尝试将日期数组（用于创建数组数组）映射到对象，以通过回调方法轻松访问每个日期。

我尝试了对“父”和“子” map（）方法的一些算术运算，但我猜索引属性没有被继承

我什至尝试创建一个以日期作为自定义键的数组，每个元素都是两个元素的数组（这是我需要通过这些回调操作的数据）

日期数组示例数组

let arrayOfWeeks = [
 [
  "01.05.2019",
  "02.05.2019",
  "03.05.2019",
  "04.05.2019",
  "05.05.2019",
  "06.05.2019",
  "07.05.2019",
 ],
 [
  "08.05.2019",
  "09.05.2019",
  "10.05.2019",
  "11.05.2019",
  "12.05.2019",
  "13.05.2019",
  "14.05.2019",
  ]
]

日历表

<tbody>
  {arrayOfWeeks.map((row, index) =>
    <tr key={index}>
      {row.map((date, index) =>
        <CalendarCell key={index} date={date} index={index} callback={() => this.onCallback(someProps)} />
      )}
    </tr>
  )}
</tbody>

CalendarCell无状态组件

const CalendarCell = (props: any) => (
    <td>
        <Row>
            <Col>
                {props.date}
            </Col>
        </Row>
        <Row>
            <Col>
                <Button onClick={props.onCallback}>1</Button>
                <Button onClick={props.onCallback}>2</Button>
            </Col>
        </Row>
    </td>
)

我希望每个CalendarCell组件都具有唯一的键/索引/ id /以便能够通过它们访问父组件中的数组

更新：谢谢米歇尔！

这是固定代码的样子

<tbody>
  {arrayOfWeeks.map((row, index) =>
    <tr key={index}>
      {row.map((date, index2) =>
        <CallendarCell key={index} date={date} index={index * 7 + index2} onCallback={this.onCallback} />
     )}
   </tr>
  )}
</tbody>

由于索引有两个唯一的名称，因此可以完成一些数学运算

Answer 1

为索引使用不同的名称。像这样：

validator = /\d+/;
let strToValidate = 'something here';
if (strToValidate === null || validator.test(strToValidate) {
  doSomething();
}

通常：

当两个函数相互嵌套时，您可以执行以下操作：

<tbody>
    {arrayOfWeeks.map((row, index) =>
        <tr key={index}>
            {row.map((date, index2) =>
                <CalendarCell key={index} date={date} index={index}
                 callback={() => this.onCallback(someProps)} />
            )}
               </tr>
    )}
</tbody>

如果您不清楚这个问题，或者您有任何疑问，请告诉我

如何在“子” map（）中访问map（）函数的“父”索引

1 个答案: