如何使用reason-react有条件地在JSX中设置HTML属性?

IT技术 reactjs reason reason-react
2021-05-20 22:41:57

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

如何根据条件将属性的存在添加checkedinput标签中item.checked == true

1个回答

正如@wegry 在评论中所说,直接传递值似乎更适合您的用例,因为它item.checked已经是一个布尔值,并checked采用一个布尔值。

但更一般地回答,由于 JSX 属性只是引擎盖下的可选函数参数,您可以使用简洁的语法技巧来显式地将 an 传递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 文档的 Function 页面上标题为Explicitly Passed Optional的部分中有所记录