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

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>
  }
}

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

Answer 1

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

但是更笼统地回答，由于 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>

这记录在标题为 Explicitly Passed Optional 的部分中在 Reason 文档的 Function 页面上。