在jsx标记中使用三级运算符作为属性？

Question

我有一个奇怪的问题，但到目前为止，我还没有在某个地方问过这个问题。

如果我尝试使用jsx有条件地渲染类名，我将执行以下操作：

<input 
{...input}
type={type}
className="form__input"
classname={boolean ? "boo" : null}
/>

对于布尔属性（如“已禁用”），这似乎不起作用。例如：

<input 
{...input}
type={type}
className="form__input"
{disabled ? "disabled" : null}
/>

这似乎合乎逻辑，因为我不想将字符串作为jsx属性插入。但是，除了有条件地呈现整个jsx标签，真的没有别的方法吗？

if (boolean) { <input disabled />} } else { <input /> }

Answer 1

disabled不是HTML属性，而是JSX属性。它们旨在方便地与JavaScript表达式一起使用。

disabled属性没有值是the same as disabled={true}，而disabled={false}属性将导致未添加disabled属性。

考虑到disabled变量是布尔值，它应该是：

<input 
{...input}
type={type}
className="form__input"
disabled={disabled}
/>

Answer 2

正如Federkun在评论中指出的，您可以执行以下操作：

<input 
{...input}
type={type}
className="form__input"
disabled={disabled}
/>

如果布尔值为true，则该属性将作为裸属性包括在内。如果为false，则不包含该属性。

您可以在2014年查看有关增强JSX以支持此行为的讨论： https://github.com/facebook/react/issues/961