页面切换如何禁止刷新呢？-灵析社区

两个页面切换，如何禁止刷新呢？不借助浏览器缓存方法，比如localStorage、sessionStorage，切换会重新刷新页面，想要的结果是第一次切换刷新后，再次切换到当前页面无需刷新，就跟antd的Tabs一样效果比如下面两个页面，用Radio来互相切换，比如第一个ChildComponents_1页面input输入“测试”内容，切换到ChildComponents_2，再切换ChildComponents_1，发现input输入“测试”内容已经没了，页面被重新初始化了，这个不通过浏览器缓存方法该怎么解决呢？ import React from 'react'; import {Radio,Input} from 'antd'; import ChildComponents_2 from './ChildComponents_2'; class ChildComponents_1 extends React.Component { constructor(props) { super(props); this.state = { inputValue:'', radioValue:'组件一' } } render() { const {inputValue,radioValue} = this.state; return ( { radioValue==='组件一'?( { this.setState({inputValue:e.target.value}); }} /> { this.setState({radioValue:e.target.value}); }} > 组件一组件二 ):( ) } ); } } export default ChildComponents_1; import React from 'react'; import {Radio,Input} from 'antd'; import ChildComponents_1 from './ChildComponents_1'; class ChildComponents_2 extends React.Component { constructor(props) { super(props); this.state = { inputValue:'', radioValue:'组件二' } } render() { const {inputValue,radioValue} = this.state; return ( { radioValue==='组件二'?( { this.setState({inputValue:e.target.value}); }} /> { this.setState({radioValue:e.target.value}); }} > 组件一组件二 ):( ) } ); } } export default ChildComponents_2;

阅读量：18

点赞量：0

问AI

生成头像

页面没有刷新，只是每次切换的时候都生成了一个新的实体，没有使用旧的重新组织一下代码，用hook来是实现 // ChildComponet.js import React from "react"; import { Input } from "antd"; import PropTypes from "prop-types"; function ChildComponent({ show }) { const [value, setValue] = React.useState(""); if (!show) return null; /* 关键点 */ return ( { setValue(e.target.value); }} /> ); } // 用于防止eslint报错 ChildComponent.propTypes = { show: PropTypes.bool.isRequired, }; export default ChildComponent; // ParentComponet.js import React from "react"; import { Radio } from "antd"; import ChildComponent from "./ChildComponent"; function ParentComponent() { const [value, setValue] = React.useState("组件一"); return ( {/* 这两个实体一开始就是都存在的，只是切换的时候，返回的值不同。但是它们的状态都保存在各自实体里了。 */} { setValue(e.target.value); }} > 组件一组件二 ); } export default ParentComponent; //App.js import "./styles.css"; import ParentComponent from "./ParentComponent"; export default function App() { return ( ); } "codesandbox" (https://link.segmentfault.com/?enc=Pk7v9k9OujX1DOVzD5hrWg%3D%3D.EmuRBe8zIyF5XO06ngR8OlGvyQ49%2F3Or1hId3So1pm6p9QjIQqPPnP3%2B75eBCFCrXUVGikwUxuPpDnPlXrrN973FUvv%2BGARDnu5AuKTvSZ%2FCM9uXj5yQVGHuRqiao%2Bkv) 不仅仅是能不能保存状态的问题，而且还有性能问题，每切换一次就生成一个实体。一个组件A中生成一个组件B，一个组件B又能生成一个组件A，这个结构就有问题。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241016/2ec0fe34cf714d85ee81e82c2182b901.png) 修改：不将Radio.Button拆出来，去掉嵌套调用，状态上移 // ChildComponent.js import React from "react"; import { Input, Radio } from "antd"; import PropTypes from "prop-types"; function ChildComponent({ show, changeTab }) { const [value, setValue] = React.useState(""); if (!show) return null; /* 关键点 */ return ( { setValue(e.target.value); }} /> { changeTab(e.target.value); }} > 组件一组件二 ); } // 用于防止eslint报错 ChildComponent.propTypes = { show: PropTypes.bool.isRequired, }; export default ChildComponent; // ParentComponent.js import React from "react"; import { Radio } from "antd"; import ChildComponent from "./ChildComponent"; function ParentComponent() { const [value, setValue] = React.useState("组件一"); return ( ); } export default ParentComponent; //App.js import "./styles.css"; import ParentComponent from "./ParentComponent"; export default function App() { return ; }