我想知道為什么被注釋掉的 const 排序方法不起作用,而處于活動狀態的排序方法確實起作用。
如果我沒記錯的話,第一個是“正常”的 if 陳述句,而另一個是三元運算子。是不是一樣的東西,但是寫的不一樣?
import { useState } from "react";
import Player from "./Player";
export default function Scoreboard() {
const initPlayerScores = [
{
id: 1,
name: "Dexter",
score: 33,
},
{
id: 2,
name: "Noodles",
score: 112,
},
{
id: 3,
name: "Greg",
score: 3,
},
{
id: 4,
name: "Ron",
score: 12,
},
];
const [players, setPlayers] = useState(initPlayerScores);
const [sortBy, setSortBy] = useState("score");
const sortByScore = (playerA, playerB) => playerA.score - playerB.score;
const sortByName = (playerA, playerB) =>
playerA.name.localeCompare(playerB.name);
// const sortingMethod = () => {
// if (sortBy === "name") {
// return sortByName;
// } else {
// return sortByScore;
// }
// };
const sortingMethod = sortBy === "name" ? sortByName : sortByScore;
const playersSorted = [...players].sort(sortingMethod);
const changeSorting = (event) => {
setSortBy(event.target.value);
};
return (
<div>
<h1>The Scoreboard</h1>
Sort by{" "}
<select onChange={changeSorting}>
<option value="name">Name</option>
<option value="score">Score</option>
</select>
{playersSorted.map((player) => (
<Player key={player.id} name={player.name} score={player.score} />
))}
</div>
);
}
uj5u.com熱心網友回復:
我認為@deceze 的意思是您需要在sortingMethod 中評估您的sortByName 和sortByScore 函式。下面的代碼將起作用:
const sortingMethod = (playerA, playerB) => {
if (sortBy === "name") {
return sortByName(playerA, playerB);
} else {
return sortByScore(playerA, playerB);
}
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/457437.html
標籤:javascript if 语句 条件运算符
上一篇:如何在JS中構造輸入引數到物件