Первый случай, самый частый.
Случается что параметр у узла должен присутствовать при некотором условии. Например работа с параметром типа disabled. Предположим что по условию задачи у кнопки может включаться параметр disabled.
<!-- html -->
<button disabled="disabled">disabled button</button>
Реакт позаботился об этом случае: нужно только указывать булево значение для реакт атрибута:
// Объявление компонента
export function component(props) {
render (<button disabled={props.disabled}>button text</button>)
}
// Кнопка со включенным disabled
<component disabled={true} />
// Кнопка с выключенным disabled
<component disabled={false} />
Второй случай, когда небулевый атрибут может как присутствовать, так и нет. В моем случае некоторым ссылкам надо было добавлять target="_blank", а другие должны были быть без аттрибута target.
Для этого случая я использовал спред оператор. Все атрибуты JSX тега - поля объекта props, передаваемого в конструктор. Атрибуты можно указывать через объект и спред оператор
// В случае когда isExternal == true, будет добавлено свойство target="blank"
// В случае когда isExternal == false, никаких дополнительных параметров у узла не будет
<a
{...(isExternal ? {target: '_blank'} : {})}
>Link</a>
В оригинальном ответе на stack overflow скобки перед спред оператором не используются, я добавил их так как на мой взгляд без этого сложнее понять что именно происходит.