我想列印出按鈕，并且每當單擊它以將屬性搜索游戲更改為相反的情況（如果其為假 - 真）并列印出另一個按鈕。現在甚至沒有按鈕出現（如果它在回傳后的 jsx 代碼中，它會列印按鈕但不會在單擊時更改它）。任何想法我該如何寫下來？
let searchingGame = false;
const isSearchingForGame = () => {
searchingGame = !searchingGame;
if (isSearchingForGame == true)
{
return (<button onClick={isSearchingForGame} className="find-match">Find Match</button>)
}
else
{
return (<button onClick={isSearchingForGame} className="find-match">Searching for a Match</button>)
}
}
return (
<div className="look-ranked-container">
<div className="time-searching">Searching: 00:23 min</div>
{isSearchingForGame}
</div>
)
}
uj5u.com熱心網友回復：
- 該函式未呼叫，將其更改為：
{isSearchingForGame()} searchingGame應該是一個鉤子（例如useState）return可以通過設定text然后單回傳來簡化雙精度
演示：
const { useState, useEffect } = React;
function App() {
const [searchingGame, setSearchingGame] = useState(false);
const toggleIsSearching = () => setSearchingGame(!searchingGame);
const getContent = () => {
const text = (searchingGame)
? 'Find Match'
: 'Searching for a Match'
return (<button onClick={toggleIsSearching} className="find-match">{text}</button>)
}
return (
<div className="look-ranked-container">
<div className="time-searching">Searching: 00:23 min</div>
{getContent()}
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("react"));
root.render(<App />);<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="react"></div>uj5u.com熱心網友回復：
您應該像{isSearchingForGame()}一樣呼叫函式 isSearchingForGame并使用 useState 使變數searchGame 成為組件中的狀態。
此外，您可以通過在 jsx 代碼中添加函式的代碼來改進此代碼，如下所示：
return (
<div className="look-ranked-container">
<div className="time-searching">Searching: 00:23 min</div>
<button onClick={isSearchingForGame} className="find-match">.
{ searchingGame ? 'Find Match' : 'Searching for a Match' }</button>
</div>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/529673.html
標籤：反应jsx