Question

我有一个名为 items 的对象数组。每个对象看起来像这样

interface IItem {
 id: string;
 title: string;
 items: IItem[] | null
}

所以我在做递归，就像在

父组件：

        {items?.map((folder, index) => (
          <Item
            onClick={(event) => {
              event.stopPropagation();
              event.preventDefault();
              console.log(
                event.target.innerHTML,
                folder.id,
                folder.title
              );
            }}
            key={folder.id}
            data={folder}
          />
        ))}

虽然Item 组件如下所示：

const nestedItems =
    data.items
      ? data.items.map((item, index) => (
          <Item
            onClick={onClick}
            key={item.id}
            data={item}
          />
        ))
      : null;

  return (
    <div>
      <button onClick={onClick}>
        <Typography>
          {data.title} {data.id}
        </Typography>
      </button>
      <div>{nestedItems}</div>
    </div>

Html 输出和在浏览器中呈现的内容看起来正确，但是当我尝试从 {id}, or {title} 组件中的项目中获取 parent 任何具有父级的点击的输出都不会记录它自己的 ID，而是它的父 ID。奇怪的是，任何“非第一级项目”上的 console.log 看起来像这样：

event.target.innerHTML - 正确的值 folder.id, folder.title - 有父母吗？父 id 值：它是自己的 id 值

所以我不确定发生了什么以及问题在哪里：/

提前致谢！

Answer 1

您只需为每个根级 onClick 定义 Item，然后在 Item 组件中您只需将 onClick 属性传递给子级。因此，每个子节点都具有与其父节点相同的 onClick 函数。

要解决此问题，您可以通过接受数据（onClick 和/或其他信息）而不是将数据塞入其中来将 id 更改为更通用。这样，传递给 onClick 的 Item 函数适用于任何项目，但传递给每个 onClick 内按钮的 Item 函数对该项目是唯一的。

例如：

父组件：

{items?.map((folder, index) => (
    <Item
      onClick={(event, clickedFolder) => {
        event.stopPropagation();
        event.preventDefault();
        console.log(
          event.target.innerHTML,
          clickedFolder.id,
          clickedFolder.title
        );
      }}
      key={folder.id}
      data={folder}
    />
))}

Item 组件：

const nestedItems =
  data.items
    ? data.items.map((item, index) => (
        <Item
          onClick={onClick}
          key={item.id}
          data={item}
        />
      ))
    : null;

return (
  <div>
    <button onClick={event => onClick(event, data)}>
      <Typography>
        {data.title} {data.id}
      </Typography>
    </button>
    <div>{nestedItems}</div>
  </div>
)

反应递归 - 无法获得正确的值

1 个答案: