Question

一直在寻找这样的答案，但是也许我没有正确地回答它，或者实际上还没有答案。

我使用的输入组件使用键将其呈现为有效（绿色边框）或无效（红色边框），我想动态添加它：

<Input type="select" valid /> //This input has green border
<Input type="select" invalid /> //This input has red border

由于它们的键有效/无效没有像true或false这样的值，所以我不确定如何通过函数动态更改它，因为据我所知，我可以使用JSX表达式动态更改值，但是本身不添加密钥。

您能建议一种没有价值的动态添加“有效”或“无效”标签的方法吗？

Answer 1

“无值”实际上是不准确的。您看到的是valid={true}和invalid={true}的语法糖。

因此，可以通过以下方式实现同样的目标：

const valid = // whatever logic here to determine if it's valid.
<Input type="select" valid={valid} invalid={!valid} /> // Either return or assign to something.

或者：

let inputProps = {type: 'select'};
if (/* whatever logic here to determine if it's valid*/) {
    inputProps.valid = true;
}
else {
    inputProps.invalid = true;
}

<Input {...inputProps} />; // Either return or assign to something.

但是后者要冗长得多。

Answer 2

不确定是否可以，请尝试一下。

JSX读取不包含value / =的属性为boolean / true。

设置空值：

<Input type="select" invalid={null} />

然后您可以有条件地显示有效或无效的输入元素

将密钥动态添加到React Tag

2 个答案: