點擊時反應折疊專業側邊欄

Question

我是 React 的新手。 我有一個 react-pro-sidebar，我想在點擊時關閉/打開：

export default function MaterialLayout(props) {
 const { children } = props;
 const classes = useStyle();
 function CollapseSide() {
   document.getElementById('pro1').collapsed=!document.getElementById('pro1').collapsed;
 }
 
 return (
   <ThemeProvider theme={theme}>
     <CssBaseline /> <Header />
     <ProSidebar id='pro1' onClick={CollapseSide} collapsed={false}>
....
....

我究竟做錯了什么

Answer 1

使用document.getElementById('pro1').collapsed ，您將在實際渲染的 DOM 節點上設置屬性，而不是在 React 節點上。

您可以嘗試以下方法

export default function MaterialLayout(props) {
 const { children } = props;
 const classes = useStyle();

 const [ sideCollapsed, setSideCollapsed ] = useState(false);
 const toggleSideCollapsed = useCallback(() => {
   console.log('toggle')
   setSideCollapsed(collapsed => !collapsed)
 }, [ setSideCollapsed ]) // could leave this empty
 
 return (
   <ThemeProvider theme={theme}>
     <CssBaseline />
     <Header />
     <ProSidebar onClick={toggleSideCollapsed} collapsed={sideCollapsed}>
....
....

但是我不確定ProSidebar是否采用onClick屬性。 您可以使用console.log語句並檢查您的控制台來驗證這一點。

有關更多解釋，您可以查看有關useState和useCallback的 React 文檔，或者只是在評論中詢問:)

Answer 2

你能試試這個代碼，讓我知道它是否有效嗎？

export default function MaterialLayout(props) {
    const { children } = props;
    const classes = useStyle();
    const [toggled, setToggled] = useState(false);
    const [collapsed, setCollapsed] = useState(true);
    const handleToggle = () => {
        setToggled(!toggled);
        setCollapsed(!collapsed);
    }

    return (
        <ThemeProvider theme={theme}>
        <CssBaseline /><Header />
        <ProSidebar collapsed={collapsed} toggled={toggled} onToggle={handleToggle}>
        ...rest of content...
    )
}