我在使用带有 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}