Question

我必须在树和桌子之间建立一些东西。我有文件夹，子文件夹和元素。有一个文件夹，保留在所有子文件夹中。信息呈现正确，但反应忽略了我的部分代码。

const Folder = (props) => {
    return (
        <tr key={props.id}>
            <td className='w1_20'><input type='checkbox'/></td>
            <td className='w1_10'>{props.id}</td>
            <td className='w5_10'><a href=''>{props.name}</a></td>
            <td className='w2_10'/>
            <td className='w3_20'/>
        </tr>
    )
};

这是我的文件夹组件。

const Subfolder = (props) => {
    return (
        <tr>
            <td className='p-0 bt-0' colSpan='5'>
                <table className='table table-hover w-100'>
                    <tbody>
                    {props.children}
                    </tbody>
                </table>
            </td>
        </tr>
    )
};

这是我的子文件夹组件。

const Segment = (props) => {
    return (
        <tr key={props.element.id}>
            <td className='w1_20'><input type='checkbox'/></td>
            <td className='w1_10'>{props.element.id}</td>
            <td className='w5_10'>{props.element.name}</td>
            <td className='w2_10'>{props.element.value}</td>
            <td className='w3_20'/>
        </tr>
    )
};

这是元素。

结构应如下所示：

每个子文件夹应该是文件夹行之后的下一行，它包含内部表（这非常重要，因为稍后我需要能够操作这些表）。在子文件夹中，可以是元素行或其他子文件夹。

我知道，子文件夹也应该有密钥，但现在我的主要问题是React完全忽略，在子文件夹中的td元素我正在使用另一个带有子项的表。

return (
    <tbody>
        <Folder id={1} name="Folder" />
        <Subfolder>
            <Subfolder>
                <Segment segment={{id: 1, name: "Element"}}/>
            </Subfolder>
        </Subfolder>
    </tbody>
);

如果我尝试以这种方式使用它，它可以正常工作。但是要解析我的API响应，我有函数，我将每个元素推送到数组中，最后我返回。

const InitTable = (props) => {
    let table = [];

    const mapResponse = (data) => {
        if (data) {
            if (data['folder']) {
                table = [...table, <Folder key={data.folder.id} id={data.folder.id} name={data.folder.name}/>];

                let sf = data['children'].map((item) => {
                    if (item) {
                        return mapResponse(item);
                    }
                });

                table = [...table, <Subfolder>{sf}</Subfolder>];

            } else if (data['segment']) {
                if (data['statistics']) {
                    table = [...table, <Segment statistics={data['statistics']} segment={data['segment']}/>];
                }
            }
        }
    };

    if (props.segments) {
        mapResponse(props.segments.root);
    }

    return (
        <tbody>
        {table}
        </tbody>
    );
};

我需要创建一大堆JSX并在最后渲染，所以我检查API响应中每个对象的类型，并将不同的组件推送到数组。主要的问题是，然后，React完全忽略了我的表里面的td元素都渲染为常规表。

当我期待更像的东西时：

我知道最简单的方法是将其构建为普通字符串，然后使用dangerouslySetInnerHTML（）方法，但我想避免它。

Answer 1

似乎有2个问题

<Segment segment={{id: 1, name: "Element"}}/>需要element道具，但您传递segment
您创建主tbody的方法是添加到同一个数组而不是返回一个新数组。

const InitTable = props => {
  const mapResponse = data => {
    if (data) {
      if (data['folder']) {
        let sf = data['children'].map(item => {
          if (item) {
            return mapResponse(item);
          }
        });

        return [
          <Folder
            key={data.folder.id}
            id={data.folder.id}
            name={data.folder.name}
          />,
          <Subfolder>{sf}</Subfolder>,
        ];
      } else if (data['segment']) {
        if (data['statistics']) {
          return [
            <Segment
              statistics={data['statistics']}
              element={data['segment']}
            />,
          ];
        }
      }
    }
  };

  return (
    <tbody>
      {mapResponse(props.segments.root)}
    </tbody>
  );
};

https://codesandbox.io/s/gJJ2Lm2vD

ReactJS中其他表行内的表

1 个答案: