Добавить ключ в React Tag динамически

Question

Я искал этот ответ в SO, но, возможно, я неправильно его формулирую, или ответа на этот вопрос пока нет.

Я использую компонент ввода, который использует ключ, чтобы сделать его действительным (зеленая рамка) или недействительным (красная граница), и я хотел бы добавить его динамически:

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

Поскольку у них ключ valid / invalid не имеет значения типа true или false, я не уверен, как его динамически изменить с помощью функции, поскольку, насколько мне известно, я могу изменять значения динамически с помощью выражения JSX, но не добавлять ключ сам.

Не могли бы вы предложить способ динамического добавления тега 'valid' или 'invalid' без значения?

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 читает свойства без значений / = как логическое / true.

Установить нулевые значения:

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

Затем вы можете условно показать действительные или недействительные элементы ввода