React条件渲染疑问：仅当checkedRadio为'Yes'时渲染输入框

你的代码里<>></>的写法是完全正确的，它是React的空Fragment（空片段），不会渲染额外的DOM元素，用来在else分支占位完全符合语法要求。

不过针对你这种「仅当条件为真时渲染元素，否则什么都不输出」的场景，有更简洁的写法——直接用逻辑与（&&）短路求值省略else分支：

{checkedRadio === "Yes" && (
  <input
    className="registerGitHubInput"
    type="text"
    placeholder="GitHub Username"
    value={githubUsername.githubUsername}
    onChange={(e) => setGithubUsername(e.target.value)}
    required
  />
)}

React在渲染时会自动忽略false、null、undefined这类值，当checkedRadio不等于"Yes"时，&&表达式结果为false，页面上不会渲染任何内容，完全满足你的需求，代码也更紧凑。

内容的提问来源于stack exchange，提问作者lazlodev