防止 JSX 内部的计算渲染答案

【问题标题】：Prevent calculation inside JSX from rendering防止 JSX 内部的计算渲染
【发布时间】：2022-08-18 02:19:44
【问题描述】：

也许我在这里遗漏了一些东西，但我想在一些 JSX 中做{(dataIndex = dataIndex + 1)}。

我有两个嵌套的地图，它们将表格标题和表格行放在一起。我需要给每个字段一个唯一的 tabIndex。

这是一个简化版本=>

let dataIndex = 0;
const rows = data.map((row, index) => {
    return (
      <tr >
        <td />
            {columns.map((column, index2) => {
            return (
                <td tabIndex={dataIndex}>
                {(dataIndex = dataIndex + 1)}
                </td>
                );
            }
        </tr>
    );
}))

我很快就把它敲在一起了，它并不完全相同，我已经抽象出那些无关紧要的部分。我只是不明白为什么dataIndex 会显示在每个数据字段中

你有index2它是数组中元素的唯一索引，你可以用它代替dataIndex。
这不起作用，它越过第一行然后跳过直到我的分页。是否有任何其他因素可能导致这种情况？ Index2 不是唯一的，因为它为所有第 1 列提供了相同的 tabIndex

标签： reactjs typescript jsx

【解决方案1】：

我的问题是对tabIndex 的误解。我只需要将每个<td/> 元素的标签索引设置为0，这意味着它们会被键盘找到。

它实际上只是跳过桌子。

【讨论】：

【解决方案2】：

最好的避免方法JSX计算打印到网页使用<noscript></noscript>标签围绕功能

<noscript>{your calculation}</noscript>

【讨论】：