JSX + React 中的動態 tabIndex 屬性

Question

我將如何以相同的方式有條件地在 React 組件上設置tabIndex屬性，比如設置了disabled屬性？

我需要能夠一起設置值和/或刪除屬性。

第一次嘗試是將整個屬性鍵和值設為變量：

<div { tabIndex } ></div>

但編譯器抱怨。

第二個想法是：

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

然而，這是不可取的，因為我的實際組件上有大量的屬性，而且我最終會有大量的重復代碼。

我唯一的其他想法是使用 ref，然后使用 jQuery 來設置tabindex屬性，但我寧願不必那樣做。

有任何想法嗎？

Answer 1

您可以使用屬性傳播運算符來做到這一點：

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

Answer 2

我相信有一種更簡單的方法（比 Aaron 的建議）。

如果該屬性的值為 null 或未定義，React 會從 JSX 元素中刪除該屬性。 我需要得到肯定知道的人的確認。

因此你可以使用這樣的東西：

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

如果t1為空，則tabIndex屬性將被刪除。

Answer 3

例如，我們有三個屬性，tabIndex、class 和 id。

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

undefined/null 值 props 不會添加到 div 中，所以渲染結果是

<div class="tab" />