三元操作不適用於reactJS中的按鈕單擊？

Question

我有條件地渲染一個按鈕，所以當它被點擊時，按鈕從播放變為暫停。 我是通過三元操作來做到這一點的，但是，當單擊按鈕時，它不會改變。 這是我的代碼：

...
const isOn = true;
...

return(
...
{isOn ? (<Button className="icon" color="info" type="submit" onClick={startMe}><i className="playicon"/></Button>) : (<Button className="icon" color="info" type="submit" onClick={stopMe}><i className="pauseicon"/></Button>)}
...
)

我真的不明白為什么這不起作用。 如果我手動將isOn設置為false按鈕會改變，但如果我點擊它不會。

Answer 1

在使用三元運算符時，您忘記將整個JSX元素包裝在一個父元素中。

因此，將它們包裝在fragment <></>元素或React.Fragment

return (
  <>
    {
      // your ternary logics here
    }
  </>
)

或者：

import React, {Fragment} from 'react';

// rest of the codes ...

return (
  <Fragment>
    {
      // your ternary logics here
    }
  </Fragment>
)

Answer 2

你不能使用像const isOn = true;這樣的常規變量const isOn = true; 因為它們不會導致重新渲染。 您需要使用狀態。

const [isOn, setIsOn] = useState(true); // set default to false if you want

const startMe = () => {
  setIsOn(true);
}

const stopMe = () => {
  setIsOn(false);
}

return(
<>
{isOn
  ? (<Button className="icon" color="info" type="submit" onClick={startMe}><i className="playicon"/></Button>)
  : (<Button className="icon" color="info" type="submit" onClick={stopMe}><i className="pauseicon"/></Button>)
}
</>
)