打印长度未知的列表

Question

我有一个长度未知的 list(string)，我想在我的 ReasonReact 组件中呈现它。我读过 no built-in support for printing complex data structures. But how would one go about rendering a list in its component in a pure functional way without using Javascript? I've found a snippet 可以使用递归模式匹配来实现这一点。我想一定有更简单的方法，因为这似乎是一个相当常用的操作。

Javascript 等同于我要实现的目标是 Array.toString()。

Answer 1

如果我没理解错的话，您需要完成两个步骤：

要从 list(string) 中创建一个 string，最好采用与 Array.toString 相同的格式，即逗号分隔，不使用方括号，并且不使用任何 JavaScript-特定的 API。
将字符串呈现为 ReasonReact 组件。

第 1 步：字符串转换

这可以使用 String.concat:

let myList = ["a", "b", "c"];
let myString = String.concat(", ", myList);

这将 return "a, b, c"

第 2 步：呈现为 ReasonReact 组件

ReasonReact 中的渲染字符串是使用 ReasonReact.string 完成的。这是一个完整的、可运行的组件示例，该组件采用 list(string) 类型的道具 items 并将其呈现在 <span> 元素中。

module ListRenderer = {
  let component = ReasonReact.statelessComponent("ListRenderer");
  let make = (~items, _children) => {
    ...component,
    render: _self =>
      <span> {ReasonReact.string(String.concat(", ", items))} </span>
  };
};

ReactDOMRe.renderToElementWithId(<ListRenderer items=["a", "b", "c"] />, "preview");

Playground link

打印长度未知的列表

Printing lists with unknown length

reason

reason-react

第 1 步：字符串转换

第 2 步：呈现为 ReasonReact 组件