动态添加键到 React Tag答案

【问题标题】：Add key to React Tag dynamically动态添加键到 React Tag
【发布时间】：2019-01-08 01:37:12
【问题描述】：

一直在 SO 中寻找这个答案，但也许我没有正确理解它，或者实际上还没有答案。

我正在使用一个输入组件，它使用一个键来呈现它有效（绿色边框）或无效（红色边框），我想动态添加它：

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

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

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

【问题讨论】：

标签： html reactjs jsx

【解决方案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.

但后者更冗长。

【讨论】：

另外，使用 CSS 类和 classnames 包来处理这个问题可能会更好。
太棒了！就是这个

【解决方案2】：

不确定这是否可行，但请尝试一下。

JSX 将没有值/= 的属性读取为 boolean/true。

设置空值：

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

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

【讨论】：