如何以同样的方式有条件地设置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" />