Как условно добавлять атрибуты к компонентам React?

Вот альтернативный вариант.

var condition = true;

var props = {
  value: 'foo',
  ...(condition && { disabled: true })
};

var component = <div {...props} />;

Или его инлайн-версия:

var condition = true;

var component = (
  <div value="foo" {...(condition && { disabled: true })} /> 
);

Таким образом, вы можете динамически добавлять свойства в компонент, основываясь на значении условной переменной condition. Если условие истинно, будет добавлено свойство disabled.

Вы можете использовать тот же самый подход, который применяется для добавления/удаления (частей) компонентов ({isVisible && <SomeComponent />}).

Пример:

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

В данном случае, если someCondition истинно, то someAttribute получит значение someValue, в противном случае атрибут будет равен false. Это удобный способ условного присвоения значений атрибутам в JSX.

Если вы используете ECMAScript 6, вы можете легко сделать это следующим образом:

// Сначала создайте объект-обертку.
const wrap = {
    [variableName]: true
}
// Затем используйте его
<SomeComponent {...{wrap}} />

Этот подход позволяет динамически задавать ключи объекта на основе переменных, что может быть полезно при передаче свойств компонентам.

Вот один из способов, как я это делаю.

С условием:

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

Однако я все же предпочитаю использовать стандартный способ передачи пропсов, так как он более читаем (на мой взгляд) в случае отсутствия условий.

Без условия:

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

Чтобы добавить пользовательское свойство (например, с использованием aria-* или data-*), если условие истинно, вы можете использовать следующую конструкцию:

{...this.props.isTrue && {'aria-name' : 'something here'}}

А если вы хотите добавить стиль, если условие истинно, вы можете сделать это так:

{...this.props.isTrue && {style : {color: 'red'}}}

Эти примеры показывают, как использовать оператор "и" (&&) для условного добавления свойств и стилей в ваш компонент. Если this.props.isTrue истинно, то соответствующее свойство будет добавлено к объекту, который передается компоненту.