Как условно установить атрибуты HTML в JSX, используя разумную реакцию?

Question

Я хочу сделать флажок HTML, чье состояние контролируется данными.

Дайте компонент без состояния, который получает item тип { label: string, checked: bool},

Вот так:

let component = ReasonReact.statelessComponent("TodoItem");

let make = (~item, _children) => {
  render: _self => {
     <li> <input type_="checkbox" {/*looking for something like this*/ item.checked ? "checked" : "" /* doesn't compile */}/> {ReasonReact.string(item.label)} </li>
  }
}

Как мне добавить наличие атрибута checked к input тег на основе item.checked == true состояние?

Answer 1

Как сказал @wegry в комментарии, кажется, что он лучше подходит вашему варианту использования, просто передавая значение напрямую, так как item.checked уже является логическим, и checked принимает логическое значение.

Но чтобы ответить более широко, поскольку атрибуты JSX являются просто необязательными аргументами функции под капотом, вы можете использовать аккуратный синтаксический прием, чтобы иметь возможность явно передавать option к нему: просто предшествовать значение с ?, С вашим примером:

let component = ReasonReact.statelessComponent("TodoItem");

let make = (~item, _children) => {
  render: _self => {
     <li> <input type_="checkbox" checked=?(item.checked ? Some(true) : None) /> {ReasonReact.string(item.label)} </li>
  }
}

Или, чтобы привести пример, где у вас уже есть возможность:

let link = (~url=?, label) => 
  <a href=?url> {ReasonReact.string(label)} </a>

Это задокументировано в разделе " Явно переданный необязательно" на странице "Функции" в документации по Reason.