JSX+Rreact中的动态tabIndex属性

Dynamic tabIndex attribute in JSX + React

本文关键字：tabIndex 属性 动态 JSX+Rreact      更新时间：2024-04-24

如何以同样的方式有条件地设置React组件上的tabIndex属性，比如设置disabled属性？

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

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

<div { tabIndex } ></div>

但是编译器抱怨。

第二个想法是：

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

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

我唯一的其他想法是使用ref，然后使用jQuery来设置tabindex属性，但我宁愿不必这样做。

有什么想法吗？

您可以使用属性排列运算符：

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

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

如果JSX元素的属性值为null或未定义，React将从该元素中删除该属性。我需要一个有把握的人来证实这一点。

因此，你可以使用这样的东西：

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

如果t1为空，则tabIndex属性将被删除。

例如，我们有三个属性，tabIndex、class和id。

let tabIndex;
let id;
let className = "tab";
let props = {
    tabIndex,
    className,
    id,
}
let div = <div {...props} />

undefined/null值道具不会添加到div中，因此渲染结果为

<div class="tab" />
相关文章：