React js 的 JSX 中的 Javascript 不起作用

Question

从 'react' 导入 React，{useState}；导入'./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");
                      <h1>Count Down Started</>
              }
      })}
      
    </>
  );
}

export default App;

每当用户点击按钮时，包含“倒计时开始”的 h1 标签应该显示在屏幕上。但是，这并没有发生。

Answer 1

这样试试：

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

Answer 2

您只需添加一个 conditional 即可。

沙盒link：https://codesandbox.io/s/react-hooks-counter-demo-forked-2qc1d?file=/src/index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.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;

Answer 3

您的函数从来都不是真正的运行，它只是被定义了。使用括号 () 执行它。此外，由于您有花括号，因此您必须在箭头函数内使用 return 关键字。


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

Answer 4

您可以使用条件渲染。

function App() {

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

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


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

export default App;

Answer 5

{ flag === 1 ? <h1>Count Down Started</h1> : undefined}

React js 的 JSX 中的 Javascript 不起作用

Javasript inside JSX of react js does not working

jsx

reactjs