Question

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

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

首先尝试将整个属性键和值设为变量：

- (IBAction)switchLjudChanged:(UISwitch *)sender {

NSUserDefaults *standardDefaults = [NSUserDefaults standardUserDefaults];

if (sender.on == 0) {

    [standardDefaults setObject:@"Off" forKey:@"switchKeyLjud"];

} else if (sender.on == 1) {

    [standardDefaults setObject:@"On" forKey:@"switchKeyLjud"];

}

if ([[standardDefaults stringForKey:@"switchKeyLjud"] isEqual: @"On"]) {

    [ImageViewLjud setImage:[UIImage imageNamed:@"ljudOFF.png"]];
}

else {

    [ImageViewLjud setImage:[UIImage imageNamed:@"ljudON.png"]];
}

    [standardDefaults synchronize];

}

但编译器抱怨。

第二个想法是：

<div { tabIndex } ></div>

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

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

任何想法？

Answer 1

您可以使用attribute spread operator：

执行此操作

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

Answer 2

我相信有一种更简单的方式（比亚伦的建议）。

如果该属性的值为null或未定义，则React从JSX元素中删除属性。我需要这个确认的人确认。

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

让t1 =条件？ 1：null; let div =＆lt; div tabIndex = {t1}＆gt; ...＆lt; / div＆gt ;;

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

JSX + React中的动态tabIndex属性

2 个答案: