在jsx标签中使用三元运算符作为属性？答案

【问题标题】：Use tertiary operator in jsx tag for attribute?在jsx标签中使用三元运算符作为属性？
【发布时间】：2019-02-10 20:06:55
【问题描述】：

我有一个奇怪的问题，但到目前为止，我还没有发现有人问过这个问题。

如果我尝试使用 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 /> }

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

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

disabled 没有值的属性是the same as disabled={true}，而disabled={false} 属性会导致disabled 属性不被添加。

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

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

【讨论】：

【解决方案2】：

正如 Federkun 在 cmets 中指出的那样，您可以这样做：

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

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

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

【讨论】：