javascript内部的JSX的react js不工作

Question

import React， {useState} from ' React ';进口的。/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标签包含&;Countdown started &;应该显示在屏幕上。但是，这并没有发生。

Answer 1

试一下:

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

Answer 2

您可以添加一个conditional来实现这一点。

沙盒链接: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}