单击按钮一次单击仅呈现文本答案

【问题标题】：Click button once click just render text单击按钮一次单击仅呈现文本
【发布时间】：2021-11-14 00:59:16
【问题描述】：

如何创建一个按钮，而不是单击按钮后使用 react hook 只呈现文本

const WelcomeButton = (props) => {
  
const[welcomeBtn, setwelcomeBtn] = useState()

 const handelClick = () => {
 if() {
 retun <p>Hi John</p>
 }
}
  return (
  <div>
<button onClick={handelClick}> Welcome </button>    
  </div>
  )
  ;
};

【问题讨论】：

有点不清楚你要什么，想要的行为和结果。我的猜测是您需要更新 onClick 回调中的状态并有条件地在主函数组件返回中返回附加的 JSX，因为您不能从事件处理程序返回 JSX 并期望它只是在某个地方呈现。跨度>
你好，我只想<button>Welcome </button>这个按钮元素一旦点击就会消失，按钮元素将被<p>Hi John</p>替换

标签： javascript reactjs react-hooks

【解决方案1】：

我建议使用跟踪按钮已被单击的状态，并在handleClick 回调中更新/切换此值。根据此状态有条件地呈现按钮或欢迎文本。

const WelcomeButton = (props) => {
  // initial state true to show button
  const [welcomeBtn, setWelcomeBtn] = React.useState(true);

  const handelClick = () => {
    // toggle false to hide button and display welcome message
    setWelcomeBtn(false);
  };

  return (
    <div>
      {welcomeBtn ? (
        <button onClick={handelClick}> Welcome </button>
      ) : (
        <p>Hi John</p>
      )}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <WelcomeButton />,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />

【讨论】：