我在使用帶有 typescript 的三元運算符時遇到問題

Question

我在使用帶有 typescript 的三元運算符時遇到問題，請檢查代碼以了解我要說的內容。

  ` 
    const QuizQuestionContainer = ({ qa }: QuizQuestionContainerPropsType) => {
      const { question, option1, option2, option3, option4 ,checked } = qa;
     return (
        <>
          <h4>{question}</h4>
          <form>
            <input
              type="radio"
              value={option1}
              name="option"
              onClick={checkOption}
              {checked === option1 ? "defaultChecked": ""}
              
            />
      );
    };
    
    export default QuizQuestionContainer;
  `  
     

我收到一個道具“qa”，我從中解構了“checked”值，如果“checked”等於選項，我希望默認檢查輸入，但它會拋出一個錯誤，說“'... ' expected.ts(1005)" 和 "傳播類型只能從 object types.ts(2698) 創建"

Answer 1

您需要定義要為其提供值的道具名稱！

{檢查===選項1？ "defaultChecked": ""} 是有效的 boolean 值，但您需要將其分配給input道具。 也許你想做checked={option1 === "defaultChecked"} ？

這可能是由於checked變量與輸入道具具有相同的名稱 - 可能有助於將變量重命名為isChecked以避免將來混淆。

Answer 2

我相信您在這里要做的是確定輸入是否已檢查checked接受 boolean （真 = 已檢查）

改為： checked={checked === option1}

Answer 3

如果您想使用您提到的條件設置道具 defaultCheck，請更改為：

defaultChecked={checked === option1}