用按钮隐藏内容

Question

我对这里一无所知。我的任务有问题。我想要一个按钮，如果你按下它会隐藏一些内容，在本例中是一个字符串。如果内容是隐藏的，按钮必须更改其中的文本，它必须说“显示”，而不是隐藏它显示以前隐藏的内容。如果内容已经显示，按钮文本将是“隐藏”。我不知道如何使用if语句

..。

import React { useState } from "react";

function App() {
  const [hideText, setHideText] = useState(false);

  const onClick = () => setHideText(false);

  return (
    <div>
      <button onClick={onClick}>Click me</button>
      {hideText ? <Text /> : null}
    </div>
  );
}

const Text = () => <div>I will disappear, true Magic</div>;
export default App;

..。

Answer 1

我不知道我是否正确理解了你的需求。我将变量名更改为更有意义:)现在按钮显示文本可见时的Hide，隐藏文本时显示Show。单击按钮会改变状态。

import React { useState } from "react";

function App() {
  const [isTextHidden, setTextHidden] = useState(true);

  const onClick = () => setTextHidden(!isTextHidden);

  return (
    <div>
      <button onClick={onClick}>{isTextHidden ? 'Show' : 'Hide'}</button>
      {!textHidden ? <Text /> : null}
    </div>
  );
}

const Text = () => <div>I will disappear, true Magic</div>;
export default App;

Answer 2

import React { useState } from "react";

function App() {
  const [isVisible, setVisible] = useState(true);

  const onClick = () => setVisible(!isVisible);

  return (
    <div>
      <button onClick={onClick}>{isVisible? 'Hide' : 'Show'}</button>
      {isVisible? <Text /> : null}
    </div>
  );
}

const Text = () => <div>I will disappear, true Magic</div>;
export default App;