React项目JSX内嵌JavaScript代码不生效，点击按钮无法渲染对应h1元素

• JSX内嵌的{}中仅定义了立即执行函数（IIFE），没有添加()触发函数执行，表达式返回的是函数本身而非执行结果，React不会自动执行该函数也不会渲染函数对象。
• 函数内部符合flag===1条件的分支中，仅声明了h1元素，没有使用return返回该JSX元素，即使函数执行也没有可供渲染的返回值。
• h1标签的闭合语法错误，代码中写为</>，不符合JSX标签规范，必须使用对应的</h1>完成闭合。

方案1：修正原有IIFE写法 #

补充函数执行的括号、返回语句与正确闭合标签，代码如下：

import React, {useState} from 'react';
import './App.css';

function App() {
  const [flag, setflag] = useState(0);

  const startCountdown = () => {
    setflag(1);    
  };

  return (
    <>
      <button onClick={startCountdown}>Start countdown</button>
      {(() => {
        if (flag===1){
          console.log("INN");
          return <h1>Count Down Started</h1>
        }
      })()}
    </>
  );
}

export default App;

方案2：使用更简洁的逻辑与写法（React场景下更推荐） #

不需要写IIFE，直接用逻辑与运算符实现条件渲染，代码更简洁易读：

import React, {useState} from 'react';
import './App.css';

function App() {
  const [flag, setflag] = useState(0);

  const startCountdown = () => {
    setflag(1);    
  };

  return (
    <>
      <button onClick={startCountdown}>Start countdown</button>
      {flag === 1 && <h1>Count Down Started</h1>}
    </>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Mithilesh Patil