Question

我有两个不同的组件，一个是CategoryList，它是一个平面列表，而regionlist是一个节列表。我想先显示CategoryList，单击项目时，区域列表将显示，但是我不确定为什么它不起作用。（我使用上下文存储状态）

{!isToggle ? (
    <CategoryList></CategoryList>
  ) : (
    <RegionList style={styles.regionListStyle}></RegionList>
  )}

我还创建了一个按钮，以查看是否是有关上下文的问题，但不是。

const ToggleContext = createContext(true);

export const useToggle = () => {
return useContext(ToggleContext);
};

export function ToggleProvideData({children}) {
const [isToggle, setToggle] = useState(true)

return <ToggleContext.Provider value={{isToggle,setToggle}}>
        {children}
        </ToggleContext.Provider>;
}

我只是想知道条件渲染是否不适用于平板列表？

更新：我尝试创建一个状态来存储useContext isToggle，但它只出现大约1秒钟

Answer 1

我想isToggle是一个布尔变量，因此您可以使用以下代码有条件地渲染

{ (isToggle === true) &&
    <CategoryList></CategoryList>
}

{ (isToggle === false) &&
    <RegionList style={styles.regionListStyle}></RegionList>
}

与节列表和平面列表反应本地条件渲染

1 个答案: