CJY0208 / react-activation

Hack <KeepAlive /> for React
https://www.npmjs.com/package/react-activation
MIT License
1.78k stars 140 forks source link

react-activation 在组件间传递 props 时丢失状态 #317

Closed ysh199882 closed 3 months ago

ysh199882 commented 3 months ago

描述: 在使用 react-activation 的 KeepAlive 组件时,组件间传递的 props 丢失,导致组件不能正确恢复状态。 以下是一个最小化的示例:

import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [message, setMessage] = useState('Hello from Parent');

  return (
    <div>
      <h1>Parent Component</h1>
      <KeepAlive>
        <ChildComponent message={message} />
      </KeepAlive>
    </div>
  );
}

在回到子组件的时候,message为undefined

ysh199882 commented 3 months ago

跳转路由后,再回到此页面,组件间传递的属性丢失

CJY0208 commented 3 months ago

应该用 KeepAlive 包裹住 ParentComponent 而不是 ChildComponent

KeepAlive 只能保证其内部组件不被卸载,无法对 props 传递做干涉