React - 使用按钮隐藏内容

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

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;

Answer 2

不知道我是否正确理解了您的需求。我将变量名更改为更有意义:) 现在按钮在文本可见时显示 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;

React - 使用按钮隐藏内容

React - hide content with button

javascript

button

show-hide

reactjs