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（...）：文本节点不能显示为＆lt; tr＆gt;的子节点。

和

警告：validateDOMNesting（...）：＆lt; div＆gt;不能作为＆lt; tbody＆gt;
的孩子出现

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

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

Answer 1

你正在做

this.state = {
    orders: [] as orderItem[]
};

如果mobile_open为false，则

打印 false ，如let myOrders: orderItem[] = []; this.state = { orders: myOrders };。

试

interface myState {
    orders: orderItem[]
}

class myClass {
    private state: myState;
    constructor () {
        this.state = {
            orders: undefined
        }
    }
}

至于div警告，请考虑使用React 16 Fragments

使用React 16.0片段语法

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

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

<tr>false</tr>

更多关于片段here

Answer 2

在React16中，您现在可以返回一组组件，允许您删除<div />。

代码看起来像：

 <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>,

            //This inline conditional makes it weird but this works
            ...[item.mobile_open &&
              <tr className="test-td">
                <td>...</td>
              </tr>
            ]
        ];
      })}
    </tbody>

Answer 3

这就是全部：<div> cannot appear as a child of <tbody>

在myList.map(f)中，f每次调用时都应返回一个<tr>。因此，您可以预处理myList以包含JSON项，然后可以根据需要进行呈现。

但是，为每个数据项输出一行可能更好，并以不同的方式显示其他信息。当您点击箭头图标时，可能会在div内插入<td>？

React：渲染期间array.map中的多个表行

3 个答案: