關于反應鉤子的切換不起作用

我正在嘗試實作以下側切換組件。

一世

我正在維護兩個組件來處理流程。一個是 ToggleItems，另一個是 ToggleItem。

使用類被添加的打開關閉圖示left，right為頭。而對于孩子們來說up，down。有一個父狀態被維護，它會傳遞給孩子。

我看到一個孩子的向上箭頭和向下箭頭點擊，所有的孩子都被切換了。有人可以幫我糾正這個問題嗎？

import React, { useState } from "react";
import ToggleItem from "./ToggleItem";

export default const ToggleItems: React.FC = () => {
  const [headerExpand, setHeaderExpand] = useState<boolean>(false);

  return (
    <div
      className={`holder root-${!headerExpand ? "right" : "left"}`}
      onClick={() => setHeaderExpand(!headerExpand)}
    >
      <div className="body">
        <ToggleItem {...{ headerExpand }} />
        <ToggleItem {...{ headerExpand }} />
        <ToggleItem {...{ headerExpand }} />
      </div>
    </div>
  );
};

import React, { useEffect, useState } from "react";

export default const ToggleItem: React.FC = ({ headerExpand }) => {
  const [itemClick, setItemClick] = useState<boolean>(headerExpand);

  useEffect(() => {
    setItemClick(headerExpand);
  }, [headerExpand]);

  return (
        <table className="legend-group-header-table">
          <tbody>
            <tr>
              <td className="group-icon-holder">
                Sample1
              </td>
              <td className="group-count-holder">
                3</
              </td>
              <td className="group-toggle-icon-holder">
                <span
                  className={`group-toggle-icon ${itemClick ? "up" : "down"}`}
                  onClick={() => setItemClick(!itemClick)}
                >
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      {itemClick && (
        <div className="legend-group-body">
           <div> Test1 2hrs ago</div>
           <div> Test2 2hrs ago</div>
        </div>
      )}
    </div>
  );
};

此外，當父項關閉時，如果我單擊子項的任何down箭頭，父項應設定為right 圖示，并且相應的子項資料應通過down圖示可見，如第二張圖片

uj5u.com熱心網友回復：

可以更新您的父組件以維護一組布林值：每個切換一個。

接下來，您需要將特定于索引的更改處理程式傳遞給每個切換組件，以確保它能夠更改狀態。

import React, { useState } from "react";
import ToggleItem from "./ToggleItem";

type ToggleState = Record<number, boolean>;

const ToggleItems: React.FC = () => {
  const [containerExpand, setContainerExpand] = useState(false);
  const [headerExpand, setHeaderExpand] = useState<ToggleState>({});

  const createToggler = (index) => () => {
    const newHeaderExpand = { ...headerExpand };
    newHeaderExpand[index] = !newHeaderExpand[index];
    setHeaderExpand(newHeaderExpand);
  };

  return (
    <div
      className={`holder root-${!containerExpand ? "right" : "left"}`}
      onClick={() => setContainerExpand(!containerExpand)}
    >
<div style={{display: containerExpand ? "block" : "none"}} className="body">
        {[0, 1, 2, 3].map((i) => (
          <ToggleItem
            key={i}
            headerExpand={headerExpand[i] || false}
            toggle={createToggler(i)}
          />
        ))}
      </div>
    </div>
  );
};

export default ToggleItems;

最后，您可以更改子組件以洗掉冗余狀態并能夠切換父狀態：

import React, { useEffect, useState } from "react";

const ToggleItem: React.FC = ({ headerExpand, toggle }) => {
  return (
    <>
      <div>
        <table className="legend-group-header-table">
          <tbody>
            <tr>
              <td className="group-icon-holder">Sample1</td>
              <td className="group-count-holder">3</td>
              <td className="group-toggle-icon-holder">
                <span
                  className={`group-toggle-icon ${
                    headerExpand ? "up" : "down"
                  }`}
                  onClick={() => toggle()}
                ></span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      {headerExpand && (
        <div className="legend-group-body">
          <div> Test1 2hrs ago</div>
          <div> Test2 2hrs ago</div>
        </div>
      )}
    </>
  );
};

export default ToggleItem;

標籤：反应 反应钩子

上一篇：如何將React組件作為常規JS傳遞給react-test-renderer

下一篇：更新物件陣列狀態的更短方法？