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

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

0 голосов
/ 17 октября 2018

Я хочу отобразить флажок 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?

1 Ответ

0 голосов
/ 17 октября 2018

Как сказал @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.

...