React:渲染期间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>

我的问题是我得到:

警告:validateDOMNesting(...):文本节点不能显示为<tr>的子节点.

和

警告:validateDOMNesting(...):<div>不能作为<tbody>的子项出现

当我尝试上述方法时.删除div给了我Syntax error我已经知道但无论如何都尝试过.

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

Answer 1

你在做

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

用于打印假像<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>

更多关于碎片的信息