[英]Dynamic tabIndex attribute in JSX + React
我将如何以相同的方式有条件地在 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 的建议)。
如果该属性的值为 null 或未定义,React 会从 JSX 元素中删除该属性。 我需要得到肯定知道的人的确认。
因此你可以使用这样的东西:
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 值 props 不会添加到 div 中,所以渲染结果是
<div class="tab" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.