问题描述
我到目前为止的代码是:
import { INavLink,INavLinkGroup,INavStyles,Nav } from "@fluentui/react";
import React,{ createContext,useContext,useState } from "react";
interface HistoryTtem {
id: string;
}
interface AppState {
selectedItem: string | undefined;
updateSelectedItem: (value: string | undefined) => void;
items: Array<HistoryTtem>;
}
const AppContext = createContext<AppState>({
selectedItem: undefined,updateSelectedItem: (value: string | undefined) => {},items: []
});
const App = () => {
const Column1 = () => {
const rootState: AppState = useContext(AppContext);
const getNavLinks: Array<INavLink> = rootState.items.map((item) => ({
name: item.id,key: item.id,url: ""
}));
const groups: Array<INavLinkGroup> = [
{
links: getNavLinks
}
];
const navStyles: Partial<INavStyles> = {
root: {
BoxSizing: "border-Box",border: `1px solid #eee`,overflowY: "auto"
}
};
const onItemClick = (
e?: React.MouseEvent<HTMLElement>,item?: INavLink
) => {
if (item && item.key) {
rootState.updateSelectedItem(item.key);
}
};
return (
<Nav
onLinkClick={onItemClick}
selectedKey={rootState.selectedItem}
ariaLabel="List of prevIoUsly searched transactions"
styles={navStyles}
groups={groups}
/>
);
};
const Column2 = () => {
return <div>aaa</div>;
};
const [historyItems,setHistoryItems] = useState<Array<HistoryTtem>>([
{
id: "349458457"
},{
id: "438487484"
},{
id: "348348845"
},{
id: "093834845"
}
]);
const [selectedItem,setSelectedItem] = useState<string>();
const updateSelectedItem = (value: string | undefined) => {
setSelectedItem(value);
};
const state: AppState = {
selectedItem: selectedItem,updateSelectedItem: updateSelectedItem,items: historyItems
};
return (
<AppContext.Provider value={state}>
<div>
<Column1 />
<Column2 />
</div>
</AppContext.Provider>
);
};
export default App;
如您所见,我有一个根状态,它将用于驱动从第一列内部触发的第二列的更新。但它不起作用。当我点击一个项目时,第一列中的整个组件正在重新渲染,而它应该只更改所选项目。
请在此处找到 CodeSandbox。
解决方法
您不应该嵌套组件函数。
Column1
的标识在每次渲染 App
时都会发生变化,因为它是一个内部函数,这让 React 认为它需要协调所有内容。
将 Column1
和 Column2
移至模块级别。