Javascript JSX+中的动态tabIndex属性；反应

如何以相同的方式有条件地设置React组件的tabIndex属性，比如设置了“disabled”属性

我需要能够同时设置值和/或删除属性

第一次尝试是将整个属性键和值设置为变量：

<div { tabIndex } ></div>

但是编译器抱怨道

第二个想法是：

const div;
if( condition ){
   div = <div tabIndex="1"></div>
}else{
   div = <div></div>
}

const div；
如果（条件）{
div=
}否则{
div=
}

然而，这是不可取的，因为我的实际组件上有大量的属性，我最终会有大量重复的代码

我唯一的另一个想法是使用ref，然后使用jQuery设置tabindex属性，但我不希望这样做

有什么想法吗？

您可以使用：

让道具=条件？{tabIndex:1}:{}；
设div=

我相信有一个更简单的方法（比Aaron的建议）

如果JSX元素的属性值为null或未定义，React将从该元素中删除该属性。我需要一个确切知道的人来确认

因此，您可以使用如下内容：

let t1 = condition ? 1 : null;
let div = <div tabIndex={t1}>...</div>;

让t1=条件？1：空；
设div=。。。；

---

如果

t1

为空，则

tabIndex

属性将被删除。

这也非常适合复选框！这很有效。许多HTML属性是可选的。这里有一个指向类型定义的链接：对我来说，它需要

undefined

而不是null<代码>类型“number | null”不可分配给类型“number | undefined”。类型“null”不可分配给类型“number | undefined”我确认它可以与

null

配合使用。如果

null

，则不会在JSX元素上设置属性。

let t1 = condition ? 1 : null;
let div = <div tabIndex={t1}>...</div>;