如何使用原因反应有条件地在 JSX 中设置 HTML 属性？答案

【问题标题】：How to conditionally set HTML attributes in JSX using reason-react?如何使用原因反应有条件地在 JSX 中设置 HTML 属性？
【发布时间】：2018-10-17 07:16:22
【问题描述】：

我想呈现一个 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>
  }
}

如何根据item.checked == true 条件将checked 属性的存在添加到input 标记？

【问题讨论】：

输入的检查属性只是一个布尔值，IIRC。你可以做checked={item.checked}。

标签： reactjs reason reason-react

【解决方案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 文档的“功能”页面上标题为 Explicitly Passed Optional 的部分中进行了记录。

【讨论】：