javascript - 在渲染过程中 react : Multiple table rows in array. map

Question

我有这个问题。我想循环一个数组并将值显示为一个表，其中每个元素都是表中的一行。到目前为止，没有问题。但是根据每个元素中的值，我想为每个数组元素显示一个包含更多值的附加行。我有这段代码:

<tbody>
  {myList.map((item, i) => {
    return (
      <div>
        <tr key={i} onClick={toggleMobileOpen.bind(this, i)}>
          <td className="toggler">
            {item.mobile_open && <ArrowUp />}
            {!item.mobile_open && <ArrowDown />}
          </td>
          <td>{item.elem_one}</td>
          <td>{item.elem_two}</td>
          <td>{item.elem_three}</td>
        </tr>
        {item.mobile_open &&
          <tr className="test-td">
            <td>...</td>
          </tr>
        }
      </div>
    );
  })}
</tbody>

我的问题是我得到:

Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tr>.

和

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>

当我尝试上述方法时。删除 div 会给我 Syntax error 我已经知道但还是尝试过。

有没有人知道如何解决这个问题？

Answer 1

你在做什么

{item.mobile_open &&
          <tr className="test-td">
            <td>...</td>
          </tr>
        }

打印false 像<tr>false</tr>如果 mobile_open 为假。

尝试

{item.mobile_open ?
              (<tr className="test-td">
                <td>...</td>
              </tr>) : null
            }

关于 div 警告考虑使用 React 16 Fragments

使用 React 16.0 片段语法

<tbody>
  {myList.map((item, i) => {
    return [
        <tr key={i} onClick={toggleMobileOpen.bind(this, i)}>
          <td className="toggler">
            {item.mobile_open && <ArrowUp />}
            {!item.mobile_open && <ArrowDown />}
          </td>
          <td>{item.elem_one}</td>
          <td>{item.elem_two}</td>
          <td>{item.elem_three}</td>
        </tr>,
        {item.mobile_open &&
          <tr className="test-td">
            <td>...</td>
          </tr>
        }

    ];
  })}
</tbody>

但我更喜欢最新的 React 16.2 片段语法

import React, { Fragment } from "react";

<tbody>
      {myList.map((item, i) => {
        return (
          <Fragment>
            <tr key={i} onClick={toggleMobileOpen.bind(this, i)}>
              <td className="toggler">
                {item.mobile_open && <ArrowUp />}
                {!item.mobile_open && <ArrowDown />}
              </td>
              <td>{item.elem_one}</td>
              <td>{item.elem_two}</td>
              <td>{item.elem_three}</td>
            </tr>
            {item.mobile_open &&
              <tr className="test-td">
                <td>...</td>
              </tr>
            }
          </Fragment>
        );
      })}
    </tbody>

关于片段的更多信息 here