reactjs - 如何修复“重新加载页面后更改选项卡”。

Question

我在我的 UI 中使用 AntDesign 作为选项卡。当我重新加载我的页面选项卡自动更改时，我已经实施了一些常见的解决方案，但仍然无法正常工作。这个问题毁了我的用户界面

代码 ：

const [key, setKey] = useState("1");
const callback = (k) => {
    setKey(k);
    
}

const { projectId } = useParams();

return (
    <MainLayout
        component={
            <div className="flex-container">
                <Tabs defaultActiveKey={key} onChange={callback} className="flex-child" transition={false}>
                    <TabPane tab="Project Overview" key={1}>
                        <SingleProject {...props} />
                    </TabPane>
                  
                    <TabPane tab="Models" key={2}>
                        <div>
                            <a href="#">
                            <Model {...props}/>
                            </a>
                        </div>
                    </TabPane>
                    <TabPane tab="360 Tour" key={3}>
                        <div>
                        <Assests {...props}/>
                        </div>
                    </TabPane>
                    <TabPane tab="Documents" key={4}>
                        <div>
                            
                            <Document {...props}/>
                        </div>
                    </TabPane>
                    <TabPane tab="M.I.R" key={5}>
                        <div>
                            <Mir {...props} />
                        </div>
                    </TabPane>
                    {/* <TabPane tab="Vendors" key="6">
                        <div>
                            Vendors 
                        </div>
                    </TabPane> */}
                    <TabPane tab="Sub Contractors" key={7}>
                        <GCDisplay />
                        
                    </TabPane>    
                </Tabs>
            </div>
        }
       
    />

Answer 1

我使用 localStorage.setitem() 来存储选项卡的键值并将 defaultkey 值替换为 localStorage.getitem("keys") 及其工作原理

const ProjectDetails = (props) => {
    const [key, setKey] = useState("1");
    const callback = (k) => {
        localStorage.setItem("keys", k)
        setKey(k);


    }


    const { projectId } = useParams();

    return (
        <MainLayout
            component={
                <div className="flex-container">
                    <Tabs defaultActiveKey= 
{localStorage.getItem("keys")} onChange={callback} className="flex- 
 child" transition={false}>
                    <TabPane tab="Project Overview" key={1}>
                     <SingleProject {...props} />
                        
                    </TabPane>


                    <TabPane tab="Models" key={2}>
                        <div>
                         
                                <Model {...props} />
                        
                        </div>
                    </TabPane>
                    <TabPane tab="360 Tour" key={3}>
                        <div>
                            <Assests {...props} />
                        </div>
                    </TabPane>
                    <TabPane tab="Documents" key={4}>
                        <div>

                            <Document {...props} />
                        </div>
                    </TabPane>
                    <TabPane tab="M.I.R" key={5}>
                        <div>
                            <Mir {...props} />
                        </div>
                    </TabPane>
           
                    <TabPane tab="Sub Contractors" key={7}>
                        <GCDisplay />

Answer 2

你不需要在 antd 中添加 setkeys 钩子。

import { Tabs } from 'antd';

const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}

const Demo = () => (
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="Tab 1" key="1">
      Content of Tab Pane 1
    </TabPane>
    <TabPane tab="Tab 2" key="2">
      Content of Tab Pane 2
    </TabPane>
    <TabPane tab="Tab 3" key="3">
      Content of Tab Pane 3
    </TabPane>
  </Tabs>
);

ReactDOM.render(<Demo />, mountNode);