如何在react中重新渲染時隱藏字符串

Question

我在功能組件內有一個按鈕，單擊后會顯示一個字符串。 我想知道在重新渲染組件或狀態發生任何變化時如何隱藏該字符串。

<button onClick = {() => props.getstring (props.state)} >Click </button>
{props.state.string}

因此，當我單擊此按鈕時，將顯示字符串，但是當狀態更改時，字符串會保留在屏幕上。 我想在任何狀態值更改時將其隱藏。

Answer 1

您可以使用反應生命周期方法來做到這一點。 當您需要獲取組件更新事件時，可以使用getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
}

Answer 2

為此，您需要一個useEffect Hook （在React16.8中添加） ，

import React, { useState, useEffect } from 'react';

const [isHidden, setIsHidden] = useState(false);

useEffect(
  () => {
    setIsHidden(true);
  },
  [props.state],
);

//Now the setIsHidden will only be called when props.state changes.

然后您可以隱藏字符串，

{!isHidden && props.state.string}