反应条件 HTML 参数答案

【问题标题】：React Conditional HTML Parameters反应条件 HTML 参数
【发布时间】：2021-07-19 13:01:40
【问题描述】：

我正在尝试创建一个组件，并检查为我可以发送的道具。

{checked != false ? (
        <input
          id={id}
          name={name}
          type="radio"
          className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
          checked
        />
      ) : (
        <input
          id={id}
          name={name}
          type="radio"
          className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
        />
      )}

有没有什么方法可以简化它而无需重复上面的代码？

【问题讨论】：

试试这个 --> <input checked={checked} />

标签： reactjs radio-button tailwind-css

【解决方案1】：

<input
    id={id}
    name={name}
    type="radio"
    className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
    checked={checked}
  />

【讨论】：

奇怪的是我试过了。某些原因不适用于道具。
但如果它在你的代码中使用 id 和 name，它应该也可以正常工作。

【解决方案2】：

{checked && (
    <input
      id={id}
      name={name}
      type="radio"
      className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
    />
  ) }

【讨论】：