如何在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}