我有两个React组件X和Y。X保存通过不同类型的逻辑和用户输入计算的状态。用户可以单击X中的按钮，该按钮将卸载X并呈现Y。现在Y上也存在一个按钮，当单击该按钮时，将卸载Y并再次呈现X，但是X不再具有它的状态，因为在我们第一次呈现Y时卸载组件时它丢失了。我如何确保X“保持”在卸载状态下也能加载到它的状态中吗我尝试过将X的状态作为道具传递给Y，但我不确定是否可以在Y卸载时将Y上的这个道具传递回X？
z0qdvdin1#
对于所有需要通过X和Y访问的状态，在X和Y的 parent component 中对其进行初始化，然后将状态及其setter向下传递给a和Y。例如：
const App = () => { const [showY, setShowY] = useState(false); const [persistentXState, setPersistentXState] = useState(''); return showY ? <Y {...{ setShowY }} /> : <X {...{ setShowY, persistentXState, setPersistentXState }} />; };
这样，X就可以使用它的persistentXState属性并调用setPersistentXState，即使在setShowY被调用来卸载X并再次显示Y之后，它也会保持不变。
setShowY
swvgeqrz2#
是的，这是lifting state up的一个典型例子。你完全可以使用回调从Y向上传递状态，并在父状态中设置它。然后再次传递给Y。还有另一个技巧，但它将两者都保存在内存中，因此可能不是最好的：您可以使用CSS而不是卸载display: none，这意味着它在那里，但用户看不到它。
display: none
2条答案
按热度按时间z0qdvdin1#
对于所有需要通过X和Y访问的状态，在X和Y的 parent component 中对其进行初始化，然后将状态及其setter向下传递给a和Y。例如：
这样，X就可以使用它的persistentXState属性并调用setPersistentXState，即使在
setShowY被调用来卸载X并再次显示Y之后，它也会保持不变。swvgeqrz2#
是的，这是lifting state up的一个典型例子。你完全可以使用回调从Y向上传递状态，并在父状态中设置它。然后再次传递给Y。
还有另一个技巧，但它将两者都保存在内存中，因此可能不是最好的：您可以使用CSS而不是卸载
display: none，这意味着它在那里，但用户看不到它。