我有一個帶有一些嵌套標記的簡單組件：
import React, { ReactElement } from "react";
type MenuItem = {
title: string;
subItems?: Array<string>;
};
type MenuConfig = Array<MenuItem>;
function Item({ item }: { item: MenuItem }): ReactElement {
const [showItem, setShowItem] = React.useState(false);
const handleShowItem = (): void => {
setShowItem(!showItem);
};
return (
<>
{item.subItems && (
<button onClick={() => handleShowItem()}>
{showItem ? "Hide" : "Expand"}
</button>
)}
{showItem && <SubItem item={item} />}
</>
);
}
function SubItem({ item }: { item: MenuItem }): ReactElement {
const { title } = item;
return (
<ul>
{item?.subItems?.map((subitem: string, i: number) => (
<li key={i}>
{subitem}
</li>
))}
</ul>
);
}
function Solution({ menuConfig }: { menuConfig: MenuConfig }): ReactElement {
return (
<>
{menuConfig.map((item: MenuItem, i: number) => (
<div key={i}>
<span>{item.title}</span>
<Item item={item} />
</div>
))}
</>
);
}
export default Solution;
這就是我要傳遞的內容：
menuConfig={[
{
title: "About",
},
{
title: "Prices",
subItems: ["Hosting", "Services"],
},
{
title: "Contact",
subItems: ["Email", "Mobile"],
},
]}
現在，它按預期運行，如果一個專案包含，subItems那么將顯示一個Expand按鈕，如果單擊該按鈕，只會展開相關串列。
鑒于我的實施，我應該如何確保一次只打開一個串列？
因此，如果用戶單擊Expand一個按鈕，其他先前展開的串列應該關閉。
我無法處理傳入的資料，因此無法向物件添加 ID，但標題是唯一的。
我已經搜索過，雖然有一些例子，但它們對我沒有幫助，我只是無法理解這一點。
uj5u.com熱心網友回復：
這是 React 背景關系的完美用例。您本質上想要在選單之間共享狀態。您可以通過道具鉆孔來實作這一點，但是背景關系是一個更清潔的解決方案。
代碼沙箱
const MenuContext = createContext<{
expandedState?: [number, React.Dispatch<React.SetStateAction<number>>];
}>({});
function Solution(): ReactElement {
const expandedState = useState<number>(null);
const value = { expandedState };
return (
<>
<MenuContext.Provider value={value}>
{menuConfig.map((item: MenuItem, i: number) => (
<div key={i}>
<span>{item.title}</span>
<Item i={i} item={item} />
</div>
))}
</MenuContext.Provider>
</>
);
}
function Item({ item, i }: { item: MenuItem; i: number }): ReactElement {
const [expanded, setExpanded] = useContext(MenuContext)?.expandedState ?? [];
const shown = expanded === i;
return (
<>
{item.subItems && (
<button onClick={() => setExpanded?.(i)}>
{shown ? "Hide" : "Expand"}
</button>
)}
{shown && <SubItem item={item} />}
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/475716.html
標籤：javascript 反应 打字稿 反应钩子 切换
上一篇：為什么我們需要在呼叫executeScript方法之前將WebDriver實體型別轉換為JavascriptExecutor？